From 1addb392c925578acd612096f87f4837ce7a3d3a Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Wed, 26 Jul 2023 01:15:35 -0700 Subject: [PATCH 01/31] fr: Format /web/api using Prettier (part 5) (#14603) --- files/fr/web/api/history/index.md | 2 +- files/fr/web/api/history/length/index.md | 2 +- files/fr/web/api/history_api/example/index.md | 423 ++++++++++-------- .../drag_operations/index.md | 29 +- .../web/api/html_drag_and_drop_api/index.md | 109 +++-- files/fr/web/api/htmlbrelement/index.md | 4 +- files/fr/web/api/htmlbuttonelement/index.md | 10 +- .../web/api/htmlbuttonelement/labels/index.md | 4 +- .../api/htmlcanvaselement/getcontext/index.md | 10 +- .../web/api/htmlcanvaselement/height/index.md | 2 +- files/fr/web/api/htmlcanvaselement/index.md | 128 +++--- files/fr/web/api/htmlcollection/index.md | 2 +- files/fr/web/api/htmlcollection/item/index.md | 6 +- .../htmldialogelement/close_event/index.md | 43 +- files/fr/web/api/htmldialogelement/index.md | 93 ++-- .../htmlelement/beforeinput_event/index.md | 10 +- files/fr/web/api/htmlelement/blur/index.md | 17 +- .../web/api/htmlelement/change_event/index.md | 17 +- files/fr/web/api/htmlelement/click/index.md | 10 +- .../api/htmlelement/contenteditable/index.md | 6 +- files/fr/web/api/htmlelement/dataset/index.md | 12 +- files/fr/web/api/htmlelement/dir/index.md | 6 +- .../web/api/htmlelement/drag_event/index.md | 122 ++--- .../api/htmlelement/dragend_event/index.md | 122 ++--- .../api/htmlelement/dragenter_event/index.md | 122 ++--- .../api/htmlelement/dragleave_event/index.md | 122 ++--- .../api/htmlelement/dragover_event/index.md | 122 ++--- .../api/htmlelement/dragstart_event/index.md | 198 ++++---- .../web/api/htmlelement/drop_event/index.md | 122 ++--- .../web/api/htmlelement/error_event/index.md | 23 +- files/fr/web/api/htmlelement/focus/index.md | 38 +- files/fr/web/api/htmlelement/hidden/index.md | 34 +- .../web/api/htmlelement/input_event/index.md | 12 +- .../htmlelement/iscontenteditable/index.md | 14 +- files/fr/web/api/htmlelement/lang/index.md | 6 +- .../web/api/htmlelement/offsetleft/index.md | 12 +- files/fr/web/api/htmlelement/style/index.md | 13 +- .../fr/web/api/htmlelement/tabindex/index.md | 2 +- files/fr/web/api/htmlelement/title/index.md | 2 +- .../htmlformelement/acceptcharset/index.md | 2 +- .../web/api/htmlformelement/action/index.md | 4 +- .../web/api/htmlformelement/elements/index.md | 18 +- .../web/api/htmlformelement/enctype/index.md | 4 +- files/fr/web/api/htmlformelement/index.md | 129 ++++-- .../web/api/htmlformelement/length/index.md | 2 +- .../web/api/htmlformelement/method/index.md | 4 +- .../fr/web/api/htmlformelement/name/index.md | 6 +- .../htmlformelement/reportvalidity/index.md | 24 +- .../fr/web/api/htmlformelement/reset/index.md | 2 +- .../api/htmlformelement/reset_event/index.md | 34 +- .../web/api/htmlformelement/submit/index.md | 2 +- .../api/htmlformelement/submit_event/index.md | 10 +- .../web/api/htmlformelement/target/index.md | 4 +- files/fr/web/api/htmlheadingelement/index.md | 4 +- .../allowpaymentrequest/index.md | 2 +- .../fr/web/api/htmliframeelement/csp/index.md | 4 +- .../htmliframeelement/featurepolicy/index.md | 2 +- .../web/api/htmlimageelement/image/index.md | 6 +- files/fr/web/api/htmlimageelement/index.md | 36 +- .../htmlinputelement/checkvalidity/index.md | 2 +- files/fr/web/api/htmlinputelement/index.md | 1 + .../web/api/htmlinputelement/labels/index.md | 6 +- .../htmlinputelement/select_event/index.md | 26 +- .../api/htmlmediaelement/abort_event/index.md | 14 +- .../api/htmlmediaelement/buffered/index.md | 4 +- .../htmlmediaelement/canplay_event/index.md | 12 +- .../canplaythrough_event/index.md | 12 +- .../htmlmediaelement/capturestream/index.md | 2 +- .../api/htmlmediaelement/controls/index.md | 2 +- .../api/htmlmediaelement/currentsrc/index.md | 2 +- .../durationchange_event/index.md | 12 +- .../htmlmediaelement/emptied_event/index.md | 12 +- .../api/htmlmediaelement/ended_event/index.md | 12 +- .../htmlmediaelement/loadstart_event/index.md | 14 +- .../fr/web/api/htmlmediaelement/loop/index.md | 2 +- .../fr/web/api/htmlmediaelement/play/index.md | 16 +- .../web/api/htmlmediaelement/volume/index.md | 2 +- .../web/api/htmloptionelement/option/index.md | 18 +- .../htmlselectelement/checkvalidity/index.md | 2 +- files/fr/web/api/htmlselectelement/index.md | 4 +- .../web/api/htmlselectelement/remove/index.md | 1 - .../htmlselectelement/selectedindex/index.md | 10 +- .../setcustomvalidity/index.md | 2 +- files/fr/web/api/htmlslotelement/index.md | 2 +- files/fr/web/api/htmlstyleelement/index.md | 86 ++-- .../fr/web/api/htmltablecellelement/index.md | 2 +- .../web/api/htmltableelement/caption/index.md | 2 +- .../api/htmltableelement/insertrow/index.md | 36 +- .../htmltablerowelement/insertcell/index.md | 16 +- .../web/api/htmltimeelement/datetime/index.md | 2 +- files/fr/web/api/idbcursor/advance/index.md | 19 +- files/fr/web/api/idbcursor/continue/index.md | 17 +- files/fr/web/api/idbcursor/index.md | 15 +- files/fr/web/api/idbdatabase/close/index.md | 28 +- .../idbdatabase/createobjectstore/index.md | 38 +- .../idbdatabase/deleteobjectstore/index.md | 50 +-- files/fr/web/api/idbdatabase/name/index.md | 10 +- .../api/idbdatabase/objectstorenames/index.md | 10 +- .../web/api/idbdatabase/transaction/index.md | 6 +- files/fr/web/api/idbdatabase/version/index.md | 10 +- 100 files changed, 1595 insertions(+), 1274 deletions(-) diff --git a/files/fr/web/api/history/index.md b/files/fr/web/api/history/index.md index 90d36cb91ad250..5694709da24b68 100644 --- a/files/fr/web/api/history/index.md +++ b/files/fr/web/api/history/index.md @@ -10,7 +10,7 @@ L'interface **`History`** permet de manipuler l'historique de navigation du navi ## Propriétés -*L'interface `History`* *n'hérite d'aucune propriété.* +_L'interface `History` n'hérite d'aucune propriété._ - {{domxref("History.length")}} {{readOnlyInline}} - : Retourne un `Integer` représentant le nombre d'élements dans l'historique de la session, y incluant la page actullement ouverte. Par exemple, pour une page chargée dans un nouvel onglet cette propriété retourne `1`. diff --git a/files/fr/web/api/history/length/index.md b/files/fr/web/api/history/length/index.md index 136c23a102b2f6..de4a9b11293a4f 100644 --- a/files/fr/web/api/history/length/index.md +++ b/files/fr/web/api/history/length/index.md @@ -11,7 +11,7 @@ La propriété en lecture seule **`History.length`** retourne un entier indiquan ## Syntaxe ```js -const length = history.length +const length = history.length; ``` ## Spécifications diff --git a/files/fr/web/api/history_api/example/index.md b/files/fr/web/api/history_api/example/index.md index af0a596d358eb9..a98dd542d3cef6 100644 --- a/files/fr/web/api/history_api/example/index.md +++ b/files/fr/web/api/history_api/example/index.md @@ -4,7 +4,7 @@ slug: Web/API/History_API/Example translation_of: Web/API/History_API/Example --- -Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.php_, *page_deux.php* et *page_trois.php*). Pour tester cet exemple, merci de créer les fichiers suivants : +Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.php_, _page_deux.php_ et _page_trois.php_). Pour tester cet exemple, merci de créer les fichiers suivants : **page_un.php**: @@ -14,7 +14,7 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p $as_json = false; if (isset($_GET["vie - $as_json = + $as_json = ob_start(); } else { ?> @@ -62,7 +62,7 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p $as_json = false; if (isset($_GET["vie - $as_json = + $as_json = ob_start(); } else { ?> @@ -145,22 +145,22 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p ```css #ajax-loader { - position: fixed; - display: table; - top: 0; - left: 0; - width: 100%; - height: 100%; + position: fixed; + display: table; + top: 0; + left: 0; + width: 100%; + height: 100%; } #ajax-loader > div { - display: table-cell; - width: 100%; - height: 100%; - vertical-align: middle; - text-align: center; - background-color: #000000; - opacity: 0.65; + display: table-cell; + width: 100%; + height: 100%; + vertical-align: middle; + text-align: center; + background-color: #000000; + opacity: 0.65; } ``` @@ -195,38 +195,40 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p "use strict"; const ajaxRequest = new (function () { - - function closeReq () { - oLoadingBox.parentNode && document.body.removeChild(oLoadingBox); - bIsLoading = false; - } - - function abortReq () { - if (!bIsLoading) { return; } - oReq.abort(); - closeReq(); - } - - function ajaxError () { - alert("Unknown error."); + function closeReq() { + oLoadingBox.parentNode && document.body.removeChild(oLoadingBox); + bIsLoading = false; + } + + function abortReq() { + if (!bIsLoading) { + return; } - - function ajaxLoad () { - var vMsg, nStatus = this.status; - switch (nStatus) { - case 200: - vMsg = JSON.parse(this.responseText); - document.title = oPageInfo.title = vMsg.page; - document.getElementById(sTargetId).innerHTML = vMsg.content; - if (bUpdateURL) { - history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url); - bUpdateURL = false; - } - break; - default: - vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown"); - switch (Math.floor(nStatus / 100)) { - /* + oReq.abort(); + closeReq(); + } + + function ajaxError() { + alert("Unknown error."); + } + + function ajaxLoad() { + var vMsg, + nStatus = this.status; + switch (nStatus) { + case 200: + vMsg = JSON.parse(this.responseText); + document.title = oPageInfo.title = vMsg.page; + document.getElementById(sTargetId).innerHTML = vMsg.content; + if (bUpdateURL) { + history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url); + bUpdateURL = false; + } + break; + default: + vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown"); + switch (Math.floor(nStatus / 100)) { + /* case 1: // Informational 1xx console.log("Information code " + vMsg); @@ -240,163 +242,190 @@ const ajaxRequest = new (function () { console.log("Redirection code " + vMsg); break; */ - case 4: - /* Client Error 4xx */ - alert("Client Error #" + vMsg); - break; - case 5: - /* Server Error 5xx */ - alert("Server Error #" + vMsg); - break; - default: - /* Unknown status */ - ajaxError(); - } + case 4: + /* Client Error 4xx */ + alert("Client Error #" + vMsg); + break; + case 5: + /* Server Error 5xx */ + alert("Server Error #" + vMsg); + break; + default: + /* Unknown status */ + ajaxError(); } - closeReq(); } - - function filterURL (sURL, sViewMode) { - return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, ""); + closeReq(); + } + + function filterURL(sURL, sViewMode) { + return ( + sURL.replace(rSearch, "") + + ( + "?" + + sURL + .replace(rHost, "&") + .replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "") + .slice(1) + ).replace(rEndQstMark, "") + ); + } + + function getPage(sPage) { + if (bIsLoading) { + return; } - - function getPage (sPage) { - if (bIsLoading) { return; } - oReq = new XMLHttpRequest(); - bIsLoading = true; - oReq.onload = ajaxLoad; - oReq.onerror = ajaxError; - if (sPage) { oPageInfo.url = filterURL(sPage, null); } - oReq.open("get", filterURL(oPageInfo.url, "json"), true); - oReq.send(); - oLoadingBox.parentNode || document.body.appendChild(oLoadingBox); + oReq = new XMLHttpRequest(); + bIsLoading = true; + oReq.onload = ajaxLoad; + oReq.onerror = ajaxError; + if (sPage) { + oPageInfo.url = filterURL(sPage, null); } - - function requestPage (sURL) { - if (history.pushState) { - bUpdateURL = true; - getPage(sURL); - } else { - /* Ajax navigation is not supported */ - location.assign(sURL); - } - } - - function processLink () { - if (this.className === sAjaxClass) { - requestPage(this.href); - return false; - } - return true; + oReq.open("get", filterURL(oPageInfo.url, "json"), true); + oReq.send(); + oLoadingBox.parentNode || document.body.appendChild(oLoadingBox); + } + + function requestPage(sURL) { + if (history.pushState) { + bUpdateURL = true; + getPage(sURL); + } else { + /* Ajax navigation is not supported */ + location.assign(sURL); } + } - function init () { - oPageInfo.title = document.title; - history.replaceState(oPageInfo, oPageInfo.title, oPageInfo.url); - for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink); + function processLink() { + if (this.className === sAjaxClass) { + requestPage(this.href); + return false; } - - const - - /* customizable constants */ - sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav", - - /* not customizable constants */ - rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/, - oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(), - oPageInfo = { - title: null, - url: location.href - }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ { - 100: "Continue", - 101: "Switching Protocols", - 102: "Processing", - 200: "OK", - 201: "Created", - 202: "Accepted", - 203: "Non-Authoritative Information", - 204: "No Content", - 205: "Reset Content", - 206: "Partial Content", - 207: "Multi-Status", - 208: "Already Reported", - 226: "IM Used", - 300: "Multiple Choices", - 301: "Moved Permanently", - 302: "Found", - 303: "See Other", - 304: "Not Modified", - 305: "Use Proxy", - 306: "Reserved", - 307: "Temporary Redirect", - 308: "Permanent Redirect", - 400: "Bad Request", - 401: "Unauthorized", - 402: "Payment Required", - 403: "Forbidden", - 404: "Not Found", - 405: "Method Not Allowed", - 406: "Not Acceptable", - 407: "Proxy Authentication Required", - 408: "Request Timeout", - 409: "Conflict", - 410: "Gone", - 411: "Length Required", - 412: "Precondition Failed", - 413: "Request Entity Too Large", - 414: "Request-URI Too Long", - 415: "Unsupported Media Type", - 416: "Requested Range Not Satisfiable", - 417: "Expectation Failed", - 422: "Unprocessable Entity", - 423: "Locked", - 424: "Failed Dependency", - 425: "Unassigned", - 426: "Upgrade Required", - 427: "Unassigned", - 428: "Precondition Required", - 429: "Too Many Requests", - 430: "Unassigned", - 431: "Request Header Fields Too Large", - 500: "Internal Server Error", - 501: "Not Implemented", - 502: "Bad Gateway", - 503: "Service Unavailable", - 504: "Gateway Timeout", - 505: "HTTP Version Not Supported", - 506: "Variant Also Negotiates (Experimental)", - 507: "Insufficient Storage", - 508: "Loop Detected", - 509: "Unassigned", - 510: "Not Extended", - 511: "Network Authentication Required" - }; - - var - - oReq, bIsLoading = false, bUpdateURL = false; - - oLoadingBox.id = "ajax-loader"; - oCover.onclick = abortReq; - oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="; - oCover.appendChild(oLoadingImg); - oLoadingBox.appendChild(oCover); - - onpopstate = function (oEvent) { - bUpdateURL = false; - oPageInfo.title = oEvent.state.title; - oPageInfo.url = oEvent.state.url; - getPage(); - }; - - window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init); - - // Public methods - - this.open = requestPage; - this.stop = abortReq; - this.rebuildLinks = init; - + return true; + } + + function init() { + oPageInfo.title = document.title; + history.replaceState(oPageInfo, oPageInfo.title, oPageInfo.url); + for ( + var oLink, nIdx = 0, nLen = document.links.length; + nIdx < nLen; + document.links[nIdx++].onclick = processLink + ); + } + + const /* customizable constants */ + sTargetId = "ajax-content", + sViewKey = "view_as", + sAjaxClass = "ajax-nav", + /* not customizable constants */ + rSearch = /\?.*$/, + rHost = /^[^\?]*\?*&*/, + rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), + rEndQstMark = /\?$/, + oLoadingBox = document.createElement("div"), + oCover = document.createElement("div"), + oLoadingImg = new Image(), + oPageInfo = { + title: null, + url: location.href, + }, + oHTTPStatus = + /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ { + 100: "Continue", + 101: "Switching Protocols", + 102: "Processing", + 200: "OK", + 201: "Created", + 202: "Accepted", + 203: "Non-Authoritative Information", + 204: "No Content", + 205: "Reset Content", + 206: "Partial Content", + 207: "Multi-Status", + 208: "Already Reported", + 226: "IM Used", + 300: "Multiple Choices", + 301: "Moved Permanently", + 302: "Found", + 303: "See Other", + 304: "Not Modified", + 305: "Use Proxy", + 306: "Reserved", + 307: "Temporary Redirect", + 308: "Permanent Redirect", + 400: "Bad Request", + 401: "Unauthorized", + 402: "Payment Required", + 403: "Forbidden", + 404: "Not Found", + 405: "Method Not Allowed", + 406: "Not Acceptable", + 407: "Proxy Authentication Required", + 408: "Request Timeout", + 409: "Conflict", + 410: "Gone", + 411: "Length Required", + 412: "Precondition Failed", + 413: "Request Entity Too Large", + 414: "Request-URI Too Long", + 415: "Unsupported Media Type", + 416: "Requested Range Not Satisfiable", + 417: "Expectation Failed", + 422: "Unprocessable Entity", + 423: "Locked", + 424: "Failed Dependency", + 425: "Unassigned", + 426: "Upgrade Required", + 427: "Unassigned", + 428: "Precondition Required", + 429: "Too Many Requests", + 430: "Unassigned", + 431: "Request Header Fields Too Large", + 500: "Internal Server Error", + 501: "Not Implemented", + 502: "Bad Gateway", + 503: "Service Unavailable", + 504: "Gateway Timeout", + 505: "HTTP Version Not Supported", + 506: "Variant Also Negotiates (Experimental)", + 507: "Insufficient Storage", + 508: "Loop Detected", + 509: "Unassigned", + 510: "Not Extended", + 511: "Network Authentication Required", + }; + + var oReq, + bIsLoading = false, + bUpdateURL = false; + + oLoadingBox.id = "ajax-loader"; + oCover.onclick = abortReq; + oLoadingImg.src = + "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="; + oCover.appendChild(oLoadingImg); + oLoadingBox.appendChild(oCover); + + onpopstate = function (oEvent) { + bUpdateURL = false; + oPageInfo.title = oEvent.state.title; + oPageInfo.url = oEvent.state.url; + getPage(); + }; + + window.addEventListener + ? addEventListener("load", init, false) + : window.attachEvent + ? attachEvent("onload", init) + : (onload = init); + + // Public methods + + this.open = requestPage; + this.stop = abortReq; + this.rebuildLinks = init; })(); ``` diff --git a/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md index f57971a77a4487..1bbf73f4076941 100644 --- a/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md +++ b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md @@ -23,7 +23,9 @@ Pour rendre un autre élément HTML glissable, deux choses doivent être faites& Voici un exemple qui permet à une section de contenu d'être glissée : ```html -
+
Ce texte peut être glissé.
``` @@ -35,7 +37,9 @@ Notez que lorsqu'un élément est rendu glissable, le texte ou les autres élém Pour des éléments XUL, il n'est pas nécessaire d'utiliser l'attribut [`draggable`](/fr/docs/Web/HTML/Global_attributes#draggable), car tous les éléments XUL sont glissables. ```html - ``` ## Démarrer une opération de glissement @@ -43,7 +47,9 @@ Pour des éléments XUL, il n'est pas nécessaire d'utiliser l'attribut [`dragga Dans cet exemple, un scrutateur est ajouté à l'événement dragstart en utilisant l'attribut `ondragstart`. ```html -
+
Ce texte peut être glissé.
``` @@ -104,8 +110,7 @@ event.dataTransfer.setDragImage(image, xOffset, yOffset); Trois arguments sont nécessaires. Le premier est la référence à une image. Cette référence pointera en gérénal vers un élément image, mais elle peut pointer aussi vers un canvas ou vers tous autres éléments. L'image filigrane sera simplement générée telle qu'elle ressemble à l'écran, et dessinée à sa taille d'origine. Il est également possible d'utiliser des images et des canvas qui ne sont pas dans un document, comme le montre cet exemple : ```js -function dragWithCustomImage(event) -{ +function dragWithCustomImage(event) { var canvas = document.createElement("canvas"); canvas.width = canvas.height = 50; @@ -118,7 +123,7 @@ function dragWithCustomImage(event) ctx.stroke(); var dt = event.dataTransfer; - dt.setData('text/plain', 'Data to Drag'); + dt.setData("text/plain", "Data to Drag"); dt.setDragImage(canvas, 25, 25); } ``` @@ -183,7 +188,8 @@ Si vous voulez autoriser un dépôt, vous devez empêcher le comportement par d ```html
-
+
+
``` L'appel de la méthode [event.preventDefault](/fr/DOM/event.preventDefault) pendant les événements `dragenter` et `dragover` indiquera qu'un dépôt est permis à cet endroit. Toutefois, il est fréquent d'appeler la méthode [event.preventDefault](/fr/DOM/event.preventDefault) seulement dans certaines situations, par exemple si un lien est en train d'être glissé. Pour cela, appelez une fonction qui testera une condition et annulera l'événement seulement si cette condition est rencontrée. Dans le cas contraire, il suffit de ne pas annuler l'événement et aucun dépôt ne se réalisera si l'utilisateur lache le bouton de la souris. @@ -191,11 +197,9 @@ L'appel de la méthode [event.preventDefault](/fr/DOM/event.preventDefault) pend Il est plus fréquent d'accepter ou non un dépôt en fonction du type de la donnée glissée. Par exemple, permettre les images ou les liens, ou bien les deux. Pour cela, testez les [types](/fr/docs/Web/API/DataTransfer/types) de l'objet `dataTransfer`. Les types sont sous la forme d'une liste de chaînes de caractères ajoutées au début du glissement, du plus signifiant au moins signifiant. ```js -function doDragOver(event) -{ +function doDragOver(event) { var isLink = event.dataTransfer.types.contains("text/uri-list"); - if (isLink) - event.preventDefault(); + if (isLink) event.preventDefault(); } ``` @@ -232,8 +236,7 @@ During the `drop` event, you should retrieve that data that was dropped from the As with all drag related events, the event's `dataTransfer` property will hold the data that is being dragged. The [getData](/fr/docs/Web/API/DragDrop/DataTransfer#getData.28.29) method may be used to retrieve the data again. ```js -function onDrop(event) -{ +function onDrop(event) { var data = event.dataTransfer.getData("text/plain"); event.target.textContent = data; event.preventDefault(); diff --git a/files/fr/web/api/html_drag_and_drop_api/index.md b/files/fr/web/api/html_drag_and_drop_api/index.md index f18768fe2fa4e9..626b26caa67798 100644 --- a/files/fr/web/api/html_drag_and_drop_api/index.md +++ b/files/fr/web/api/html_drag_and_drop_api/index.md @@ -22,16 +22,16 @@ Lors des opérations de déplacement, plusieurs évènements sont déclenchés ( Chaque [type d'évènement de déplacement](/fr/docs/Web/API/DragEvent#Event_types) possède un [gestionnaire d'évènement global (une méthode `on...`)](/fr/docs/Web/API/DragEvent#GlobalEventHandlers) : -| Évènement | Gestionnaire d'évènement global | Déclenchement | -| ---------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [`drag`](/fr/docs/Web/API/HTMLElement/drag_event) | {{domxref('GlobalEventHandlers.ondrag','ondrag')}} | …un objet déplaçable (que ce soit un élément ou une sélection de texte) est déplacée. | -| [`dragend`](/fr/docs/Web/API/HTMLElement/dragend_event) | {{domxref('GlobalEventHandlers.ondragend','ondragend')}} | …une opération de déplacement se termine (en relâchant le bouton de la souris ou en utilisant la touche Echap, voir [Terminer un déplacement](/fr/docs/DragDrop/Drag_Operations#dragend)) | -| [`dragenter`](/fr/docs/Web/API/HTMLElement/dragenter_event) | {{domxref('GlobalEventHandlers.ondragenter','ondragenter')}} | …un élément en cours de déplacement arrive sur une zone de dépôt valide (voir [indiquer une cible de destination](/fr/docs/DragDrop/Drag_Operations#droptargets)). | -| [`dragexit`](/fr/docs/Web/API/HTMLElement/dragexit_event) | {{domxref('GlobalEventHandlers.ondragexit','ondragexit')}} | …un élément n'est plus la sélection immédiate du déplacement. | -| [`dragleave`](/fr/docs/Web/API/HTMLElement/dragleave_event) | {{domxref('GlobalEventHandlers.ondragleave','ondragleave')}} | …un élément en cours de déplacement quitte une zone de dépôt valide. | -| [`dragover`](/fr/docs/Web/API/HTMLElement/dragover_event) | {{domxref('GlobalEventHandlers.ondragover','ondragover')}} | …un élément en cours de déplacement est en cours de survol d'une zone de dépôt valide (cet évènement est déclenché toutes les quelques centaines de millisecondes). | -| [`dragstart`](/fr/docs/Web/API/HTMLElement/dragstart_event) | {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} | …l'utilisateur commence à déplacer un élément (voir [démarrer une opération de glissement](/fr/docs/DragDrop/Drag_Operations#dragstart)). | -| [`drop`](/fr/docs/Web/API/HTMLElement/drop_event) | {{domxref('GlobalEventHandlers.ondrop','ondrop')}} | …un élément est déposé sur une cible valide (voir [déposer un élément](/fr/docs/DragDrop/Drag_Operations#drop)). | +| Évènement | Gestionnaire d'évènement global | Déclenchement | +| ----------------------------------------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [`drag`](/fr/docs/Web/API/HTMLElement/drag_event) | {{domxref('GlobalEventHandlers.ondrag','ondrag')}} | …un objet déplaçable (que ce soit un élément ou une sélection de texte) est déplacée. | +| [`dragend`](/fr/docs/Web/API/HTMLElement/dragend_event) | {{domxref('GlobalEventHandlers.ondragend','ondragend')}} | …une opération de déplacement se termine (en relâchant le bouton de la souris ou en utilisant la touche Echap, voir [Terminer un déplacement](/fr/docs/DragDrop/Drag_Operations#dragend)) | +| [`dragenter`](/fr/docs/Web/API/HTMLElement/dragenter_event) | {{domxref('GlobalEventHandlers.ondragenter','ondragenter')}} | …un élément en cours de déplacement arrive sur une zone de dépôt valide (voir [indiquer une cible de destination](/fr/docs/DragDrop/Drag_Operations#droptargets)). | +| [`dragexit`](/fr/docs/Web/API/HTMLElement/dragexit_event) | {{domxref('GlobalEventHandlers.ondragexit','ondragexit')}} | …un élément n'est plus la sélection immédiate du déplacement. | +| [`dragleave`](/fr/docs/Web/API/HTMLElement/dragleave_event) | {{domxref('GlobalEventHandlers.ondragleave','ondragleave')}} | …un élément en cours de déplacement quitte une zone de dépôt valide. | +| [`dragover`](/fr/docs/Web/API/HTMLElement/dragover_event) | {{domxref('GlobalEventHandlers.ondragover','ondragover')}} | …un élément en cours de déplacement est en cours de survol d'une zone de dépôt valide (cet évènement est déclenché toutes les quelques centaines de millisecondes). | +| [`dragstart`](/fr/docs/Web/API/HTMLElement/dragstart_event) | {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} | …l'utilisateur commence à déplacer un élément (voir [démarrer une opération de glissement](/fr/docs/DragDrop/Drag_Operations#dragstart)). | +| [`drop`](/fr/docs/Web/API/HTMLElement/drop_event) | {{domxref('GlobalEventHandlers.ondrop','ondrop')}} | …un élément est déposé sur une cible valide (voir [déposer un élément](/fr/docs/DragDrop/Drag_Operations#drop)). | > **Note :** Les évènements `dragstart` et `dragend` ne sont pas déclenchés lors qu'on glisse-dépose un fichier de l'appareil dans le navigateur. @@ -72,13 +72,15 @@ Pour qu'un élément puisse être déplacé, il faut lui ajouter l'attribut [`dr ```html -

Cet élément est déplaçable.

+

+ Cet élément est déplaçable. +

``` Voir [la page de référence sur l'attribut `draggable`](/fr/docs/Web/HTML/Global_attributes/draggable) et [le guide sur les opérations de déplacement](/fr/docs/Web/Guide/HTML/Drag_operations#draggableattribute) pour plus d'informations. @@ -94,7 +96,10 @@ function dragstart_handler(ev) { // On ajoute différents types de données transportées ev.dataTransfer.setData("text/plain", ev.target.innerText); ev.dataTransfer.setData("text/html", ev.target.outerHTML); - ev.dataTransfer.setData("text/uri-list", ev.target.ownerDocument.location.href); + ev.dataTransfer.setData( + "text/uri-list", + ev.target.ownerDocument.location.href, + ); } ``` @@ -110,7 +115,7 @@ function dragstart_handler(ev) { // Note : on changera "example.gif" vers une vraie image // (sinon l'image par défaut sera utilisée) var img = new Image(); - img.src = 'example.gif'; + img.src = "example.gif"; ev.dataTransfer.setDragImage(img, 10, 10); } ``` @@ -145,19 +150,24 @@ Par défaut, le navigateur empêche de déposer quoi que ce soit sur la plupart ```html -

Zone pour déposer

+

+ Zone pour déposer +

``` On voit ici que chaque gestionnaire invoque {{domxref("Event.preventDefault","preventDefault()")}} afin d'éviter toute gestion d'évènement ultérieure (comme [les évènements tactiles](/fr/docs/Web/API/Touch_events) ou [les évènements de pointeur](/fr/docs/Web/API/Pointer_events)). @@ -172,26 +182,33 @@ Dans l'exemple suivant, on montre un gestionnaire pour le dépot de l'objet : on ```html -

Cet élément peut être déplacé.

-
Zone pour le dépôt
+

+ Cet élément peut être déplacé. +

+
+ Zone pour le dépôt +
``` Pour plus d'information, voir [Gérer le dépôt lors d'une opération de glisser-déposer](/fr/docs/Web/Guide/HTML/Drag_operations#drop). diff --git a/files/fr/web/api/htmlbrelement/index.md b/files/fr/web/api/htmlbrelement/index.md index eb65dfee59f945..c5b5b433424214 100644 --- a/files/fr/web/api/htmlbrelement/index.md +++ b/files/fr/web/api/htmlbrelement/index.md @@ -12,8 +12,8 @@ L'interface **`HTMLBRElement`** représente un retour à la ligne. Il hérite de _Hérite les propriétés de son parent : {{domxref("HTMLElement")}}._ -| Nom | Type | Description | -| -------------------------------- | -------------------------------- | ------------------------------------------------------ | +| Nom | Type | Description | +| ----------------------------- | ------------------------ | ------------------------------------------------------ | | `clear` {{deprecated_inline}} | {{domxref("DOMString")}} | Indique le flux du texte autours des objets flottants. | ## Méthodes diff --git a/files/fr/web/api/htmlbuttonelement/index.md b/files/fr/web/api/htmlbuttonelement/index.md index 791a323729c2f3..ab559447356ce6 100644 --- a/files/fr/web/api/htmlbuttonelement/index.md +++ b/files/fr/web/api/htmlbuttonelement/index.md @@ -66,11 +66,11 @@ _Hérite des propriétés de son parent, [`HTMLElement`](/fr/docs/Web/API/HTMLEl _Hérite des méthodes de son parent, [`HTMLElement`](/fr/docs/Web/API/HTMLElement)_ -| Nom | Valeur de retour| Description | -| --------------------------------------- | --------------- | -------------------------------------------------------------------- | -| `checkValidity()` | Booléen | Non prise en charge pour les éléments bouton ou de réinitialisation. | -| `reportValidity()` | Booléen | Non prise en charge pour les éléments bouton ou de réinitialisation. | -| `setCustomValidity(in DOMString error)` | `void` | Non prise en charge pour les éléments bouton ou de réinitialisation. | +| Nom | Valeur de retour | Description | +| --------------------------------------- | ---------------- | -------------------------------------------------------------------- | +| `checkValidity()` | Booléen | Non prise en charge pour les éléments bouton ou de réinitialisation. | +| `reportValidity()` | Booléen | Non prise en charge pour les éléments bouton ou de réinitialisation. | +| `setCustomValidity(in DOMString error)` | `void` | Non prise en charge pour les éléments bouton ou de réinitialisation. | Pour les navigateurs utilisant Gecko, la pseudo-classe non standard [`:-moz-submit-invalid`](/fr/docs/Web/CSS/:-moz-submit-invalid) permet de mettre en forme les boutons d'envoi de formulaire selon la validation du formulaire. diff --git a/files/fr/web/api/htmlbuttonelement/labels/index.md b/files/fr/web/api/htmlbuttonelement/labels/index.md index db8160ceb5e598..7e67a0cb6fa3d7 100644 --- a/files/fr/web/api/htmlbuttonelement/labels/index.md +++ b/files/fr/web/api/htmlbuttonelement/labels/index.md @@ -31,9 +31,9 @@ Une {{domxref("NodeList")}} contenant les éléments `
+
Lorem ipsum dolor sit amet, consectetuer
-
- Lorem ipsum dolor sit amet, consectetuer -
+
Lorem ipsum dolor sit amet, consectetuer
-
- Lorem ipsum dolor sit amet, consectetuer -
+
Lorem ipsum dolor sit amet, consectetuer
``` ### Résultat diff --git a/files/fr/web/css/background-image/index.md b/files/fr/web/css/background-image/index.md index 960e465ad4f113..40b1f85e44156c 100644 --- a/files/fr/web/css/background-image/index.md +++ b/files/fr/web/css/background-image/index.md @@ -22,14 +22,17 @@ Si une image donnée ne peut pas être chargée (par exemple lorsqu'il est impos ```css /* Valeur simple */ -background-image: url('https://example.com/bck.png'); +background-image: url("https://example.com/bck.png"); /* Plusieurs valeurs */ -background-image: url('https://example.com/top.png'), url('https://example.com/bottom.png'); +background-image: url("https://example.com/top.png"), + url("https://example.com/bottom.png"); -background-image: - linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), - url('catfront.png'); +background-image: linear-gradient( + to bottom, + rgba(255, 255, 0, 0.5), + rgba(0, 0, 255, 0.5) + ), url("catfront.png"); /* Valeur avec un mot-clé */ background-image: none; @@ -72,12 +75,12 @@ On voit ici l'effet obtenu avec plusieurs images : l'étoile est légèreme ```html

- Un paragraphe avec des chats
+ Un paragraphe avec des chats
et des étoiles.

Pas ici.

- Et voilà encore des chats.
+ Et voilà encore des chats.
Et des étoiles !

Puis plus rien.

@@ -89,7 +92,7 @@ On voit ici l'effet obtenu avec plusieurs images : l'étoile est légèreme ```css p { font-size: 1.5em; - color: #FE7F88; + color: #fe7f88; background-color: transparent; background-image: none; } @@ -99,8 +102,7 @@ div { } .catsandstars { - background-image: url("startransparent.gif"), - url("catfront.png"); + background-image: url("startransparent.gif"), url("catfront.png"); background-color: transparent; } ``` @@ -125,15 +127,15 @@ div { - [``](/fr/docs/Web/CSS/image) - [``](/fr/docs/Web/CSS/gradient) - Les fonctions CSS relatives aux images : - - [`cross-fade()`](/fr/docs/Web/CSS/cross-fade()) - - [`element()`](/fr/docs/Web/CSS/element()) - - [`image()`](/fr/docs/Web/CSS/image/image()) - - [`image-set()`](/fr/docs/Web/CSS/image/image-set()) - - [`linear-gradient`](/fr/docs/Web/CSS/gradient/linear-gradient()) - - [`radial-gradient`](/fr/docs/Web/CSS/gradient/radial-gradient()) - - [`conic-gradient`](/fr/docs/Web/CSS/gradient/conic-gradient()) - - [`repeating-linear-gradient`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()) - - [`repeating-radial-gradient`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) - - [`repeating-conic-gradient`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient()), - - [`paint()`](/fr/docs/Web/CSS/image/paint()) - - [`url()`](/fr/docs/Web/CSS/url()) + - [`cross-fade()`]() + - [`element()`]() + - [`image()`]() + - [`image-set()`]() + - [`linear-gradient`]() + - [`radial-gradient`]() + - [`conic-gradient`]() + - [`repeating-linear-gradient`]() + - [`repeating-radial-gradient`]() + - [`repeating-conic-gradient`]() + - [`paint()`]() + - [`url()`]() diff --git a/files/fr/web/css/background-origin/index.md b/files/fr/web/css/background-origin/index.md index 518bf958d005fd..14266982059c28 100644 --- a/files/fr/web/css/background-origin/index.md +++ b/files/fr/web/css/background-origin/index.md @@ -54,7 +54,7 @@ background-origin: unset; .example { border: 10px double; padding: 10px; - background: url('image.jpg'); + background: url("image.jpg"); background-position: center left; background-origin: content-box; } @@ -64,7 +64,7 @@ background-origin: unset; #example2 { border: 4px solid black; padding: 10px; - background: url('image.gif'); + background: url("image.gif"); background-repeat: no-repeat; background-origin: border-box; } @@ -72,8 +72,10 @@ background-origin: unset; ```css div { - background-image: url('logo.jpg'), url('mainback.png'); /* Applique deux images en arrière-plan */ - background-position: top right, 0px 0px; + background-image: url("logo.jpg"), url("mainback.png"); /* Applique deux images en arrière-plan */ + background-position: + top right, + 0px 0px; background-origin: content-box, padding-box; } ``` @@ -94,8 +96,12 @@ Dans cet exemple, la boîte possède une bordure épaisse en pointillés. Le pre .box { margin: 10px 0; color: #fff; - background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,0.6) 60%, rgba(252,176,69,1) 100%), - radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 28%); + background: linear-gradient( + 90deg, + rgba(131, 58, 180, 1) 0%, + rgba(253, 29, 29, 0.6) 60%, + rgba(252, 176, 69, 1) 100% + ), radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 28%); border: 20px dashed black; padding: 20px; width: 400px; diff --git a/files/fr/web/css/background-position/index.md b/files/fr/web/css/background-position/index.md index e6bff5ca809203..c667cd07e8869f 100644 --- a/files/fr/web/css/background-position/index.md +++ b/files/fr/web/css/background-position/index.md @@ -31,7 +31,9 @@ background-position: 1cm 2cm; background-position: 10ch 8em; /* Plusieurs valeurs pour plusieurs arrières-plans */ -background-position: 0 0, center; +background-position: + 0 0, + center; /* Valeurs exprimant un décalage relatif aux côtés */ background-position: bottom 10px right 20px; @@ -141,7 +143,7 @@ Dans cet exemple, on a trois éléments jaunes qui ont chacun une étoile situé ```css div { - background-color: #FFEE99; + background-color: #ffee99; background-repeat: no-repeat; width: 300px; height: 80px; @@ -150,10 +152,10 @@ div { /* On utilise la propriété raccourcie background */ .exemple_un { - background: url("startransparent.gif") #FFEE99 2.5cm bottom no-repeat; + background: url("startransparent.gif") #ffee99 2.5cm bottom no-repeat; } .exemple_deux { - background: url("startransparent.gif") #FFEE99 3em 50% no-repeat; + background: url("startransparent.gif") #ffee99 3em 50% no-repeat; } /* @@ -163,7 +165,9 @@ L'ordre est le même entre background-image et -position. */ .exemple_trois { background-image: url("startransparent.gif"), url("catfront.png"); - background-position: 0px 0px, center; + background-position: + 0px 0px, + center; } ``` diff --git a/files/fr/web/css/background-repeat/index.md b/files/fr/web/css/background-repeat/index.md index 7a600e874844dc..faad28023b619e 100644 --- a/files/fr/web/css/background-repeat/index.md +++ b/files/fr/web/css/background-repeat/index.md @@ -101,25 +101,32 @@ background-repeat: unset; ```html
    -
  1. no-repeat +
  2. + no-repeat
    3. -
  3. repeat +
  4. + repeat
    5. -
  5. repeat-x +
  6. + repeat-x
    7. -
  7. repeat-y +
  8. + repeat-y
    9. -
  9. space +
  10. + space
    11. -
  11. round +
  12. + round
    13. -
  13. repeat-x, repeat-y (plusieurs images) +
  14. + repeat-x, repeat-y (plusieurs images)
@@ -129,7 +136,8 @@ background-repeat: unset; ```css /* Commun à tous les DIVS */ -ol, li { +ol, +li { margin: 0; padding: 0; } @@ -156,18 +164,16 @@ div { background-repeat: repeat-y; } .cinq { - background-repeat: space; + background-repeat: space; } .six { - background-repeat: round; + background-repeat: round; } /* Plusieurs images */ .sept { - background-image: url(starsolid.gif), - url(favicon.png); - background-repeat: repeat-x, - repeat-y; + background-image: url(starsolid.gif), url(favicon.png); + background-repeat: repeat-x, repeat-y; height: 144px; } ``` diff --git a/files/fr/web/css/background-size/index.md b/files/fr/web/css/background-size/index.md index cc88d717d3cf83..13038c1eac84f7 100644 --- a/files/fr/web/css/background-size/index.md +++ b/files/fr/web/css/background-size/index.md @@ -75,9 +75,9 @@ Le calcul des valeurs dépend des dimensions intrinsèques de l'image (sa largeu - Une image matricielle (telle qu'une image JPG) possède toujours des dimensions intrinsèques et des proportions intrinsèques. - Une image vectorielle (telle qu'une image SVG) ne possède pas nécessairement de dimensions intrinsèques. Si elle possède à la fois une dimension verticale et une dimension horizontale intrinsèques, elle possèdera alors des proportions intrinsèques. Si elle ne possède qu'une ou aucune dimension intrinsèque, elle peut avoir ou ne pas avoir de proportions. - Un dégradé CSS (cf. [``](/fr/docs/Web/CSS/gradient)) ne possède ni dimension ni proportion intrinsèque. -- Les images d'arrière-plan créées avec la fonction [`element()`](/fr/docs/Web/CSS/element()) utiliseront les dimensions et proportions intrinsèques de l'élément générateur. +- Les images d'arrière-plan créées avec la fonction [`element()`]() utiliseront les dimensions et proportions intrinsèques de l'élément générateur. -> **Note :** Pour Gecko, les images d'arrière-plan créées avec la fonction [`element()`](/fr/docs/Web/CSS/element()) sont actuellement traitées comme des images ayant les dimensions de l'élément ou, si la zone de positionnement est un élément SVG, avec les proportions intrinsèques. Ce comportement n'est pas standard. +> **Note :** Pour Gecko, les images d'arrière-plan créées avec la fonction [`element()`]() sont actuellement traitées comme des images ayant les dimensions de l'élément ou, si la zone de positionnement est un élément SVG, avec les proportions intrinsèques. Ce comportement n'est pas standard. Selon le caractère intrinsèque ou non des dimensions et des proportions, la taille d'affichage de l'image d'arrière-plan est calculée de la façon suivante : @@ -141,8 +141,7 @@ Prenons une image d'une taille qui ne correspond pas forcément à notre documen #### HTML ```html -
-
+
``` #### CSS diff --git a/files/fr/web/css/background/index.md b/files/fr/web/css/background/index.md index c370957558d8a3..8744084ca00997 100644 --- a/files/fr/web/css/background/index.md +++ b/files/fr/web/css/background/index.md @@ -102,11 +102,11 @@ Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assi ```html

- Dessine-moi une étoile
- Qui brille
+ Dessine-moi une étoile
+ Qui brille
Dans le ciel.

-

Voici un paragraphe !

+

Voici un paragraphe !

``` ### CSS diff --git a/files/fr/web/css/basic-shape/index.md b/files/fr/web/css/basic-shape/index.md index 7e3a0270fda07d..d55372e4bf5a16 100644 --- a/files/fr/web/css/basic-shape/index.md +++ b/files/fr/web/css/basic-shape/index.md @@ -123,7 +123,10 @@ Afin d'obtenir une interpolation entre deux formes simples, il faut que les règ #### HTML ```html -Rain Drops +Rain Drops ``` #### Résultat diff --git a/files/fr/web/css/blend-mode/index.md b/files/fr/web/css/blend-mode/index.md index 87a2087d10c1a6..943530152be6c7 100644 --- a/files/fr/web/css/blend-mode/index.md +++ b/files/fr/web/css/blend-mode/index.md @@ -63,8 +63,7 @@ Une valeur de type de données `` s'écrit avec l'un des mots-clés #div { width: 300px; height: 300px; - background: url('br.png'), - url('tr.png'); + background: url("br.png"), url("tr.png"); background-blend-mode: normal; } ``` @@ -81,8 +80,7 @@ Une valeur de type de données `` s'écrit avec l'un des mots-clés #div { width: 300px; height: 300px; - background: url('br.png'), - url('tr.png'); + background: url("br.png"), url("tr.png"); background-blend-mode: multiply; } ``` @@ -99,8 +97,7 @@ Une valeur de type de données `` s'écrit avec l'un des mots-clés #div { width: 300px; height: 300px; - background: url('br.png'), - url('tr.png'); + background: url("br.png"), url("tr.png"); background-blend-mode: screen; } ``` @@ -117,8 +114,7 @@ Une valeur de type de données `` s'écrit avec l'un des mots-clés #div { width: 300px; height: 300px; - background: url('br.png'), - url('tr.png'); + background: url("br.png"), url("tr.png"); background-blend-mode: overlay; } ``` @@ -135,8 +131,7 @@ Une valeur de type de données `` s'écrit avec l'un des mots-clés #div { width: 300px; height: 300px; - background: url('br.png'), - url('tr.png'); + background: url("br.png"), url("tr.png"); background-blend-mode: darken; } ``` @@ -153,8 +148,7 @@ Une valeur de type de données `` s'écrit avec l'un des mots-clés #div { width: 300px; height: 300px; - background: url('br.png'), - url('tr.png'); + background: url("br.png"), url("tr.png"); background-blend-mode: lighten; } ``` @@ -171,8 +165,7 @@ Une valeur de type de données `` s'écrit avec l'un des mots-clés #div { width: 300px; height: 300px; - background: url('br.png'), - url('tr.png'); + background: url("br.png"), url("tr.png"); background-blend-mode: color-dodge; } ``` @@ -189,8 +182,7 @@ Une valeur de type de données `` s'écrit avec l'un des mots-clés #div { width: 300px; height: 300px; - background: url('br.png'), - url('tr.png'); + background: url("br.png"), url("tr.png"); background-blend-mode: color-burn; } ``` @@ -207,8 +199,7 @@ Une valeur de type de données `` s'écrit avec l'un des mots-clés #div { width: 300px; height: 300px; - background: url('br.png'), - url('tr.png'); + background: url("br.png"), url("tr.png"); background-blend-mode: hard-light; } ``` @@ -225,8 +216,7 @@ Une valeur de type de données `` s'écrit avec l'un des mots-clés #div { width: 300px; height: 300px; - background: url('br.png'), - url('tr.png'); + background: url("br.png"), url("tr.png"); background-blend-mode: soft-light; } ``` @@ -243,8 +233,7 @@ Une valeur de type de données `` s'écrit avec l'un des mots-clés #div { width: 300px; height: 300px; - background: url('br.png'), - url('tr.png'); + background: url("br.png"), url("tr.png"); background-blend-mode: difference; } ``` @@ -261,8 +250,7 @@ Une valeur de type de données `` s'écrit avec l'un des mots-clés #div { width: 300px; height: 300px; - background: url('br.png'), - url('tr.png'); + background: url("br.png"), url("tr.png"); background-blend-mode: exclusion; } ``` @@ -279,8 +267,7 @@ Une valeur de type de données `` s'écrit avec l'un des mots-clés #div { width: 300px; height: 300px; - background: url('br.png'), - url('tr.png'); + background: url("br.png"), url("tr.png"); background-blend-mode: hue; } ``` @@ -297,8 +284,7 @@ Une valeur de type de données `` s'écrit avec l'un des mots-clés #div { width: 300px; height: 300px; - background: url('br.png'), - url('tr.png'); + background: url("br.png"), url("tr.png"); background-blend-mode: saturation; } ``` @@ -315,8 +301,7 @@ Une valeur de type de données `` s'écrit avec l'un des mots-clés #div { width: 300px; height: 300px; - background: url('br.png'), - url('tr.png'); + background: url("br.png"), url("tr.png"); background-blend-mode: color; } ``` @@ -333,8 +318,7 @@ Une valeur de type de données `` s'écrit avec l'un des mots-clés #div { width: 300px; height: 300px; - background: url('br.png'), - url('tr.png'); + background: url("br.png"), url("tr.png"); background-blend-mode: luminosity; } ``` diff --git a/files/fr/web/css/border-block-color/index.md b/files/fr/web/css/border-block-color/index.md index 34b286869daee5..1f2c53d74bab1d 100644 --- a/files/fr/web/css/border-block-color/index.md +++ b/files/fr/web/css/border-block-color/index.md @@ -10,7 +10,7 @@ La propriété **`border-block-color`** définit la couleur de la bordure d'un ```css border-block-color: yellow; -border-block-color: #F5F6F7; +border-block-color: #f5f6f7; ``` Pour définir la couleur de la bordure sur l'autre dimension, on pourra utiliser la propriété logique {{cssxref("border-inline-color")}} qui définit {{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}. diff --git a/files/fr/web/css/border-bottom-color/index.md b/files/fr/web/css/border-bottom-color/index.md index 9aed3f1c018cd5..b38486c6db2fbf 100644 --- a/files/fr/web/css/border-bottom-color/index.md +++ b/files/fr/web/css/border-bottom-color/index.md @@ -62,9 +62,10 @@ border-bottom-color: unset; ```html
-

Une boîte avec une bordure autour. - Notez le côté de la boîte qui est - rouge.

+

+ Une boîte avec une bordure autour. Notez le côté de la boîte qui est + rouge. +

``` diff --git a/files/fr/web/css/border-bottom-left-radius/index.md b/files/fr/web/css/border-bottom-left-radius/index.md index f92d4be8b366d7..5dbd76dd42e8a8 100644 --- a/files/fr/web/css/border-bottom-left-radius/index.md +++ b/files/fr/web/css/border-bottom-left-radius/index.md @@ -89,10 +89,10 @@ div { ### HTML ```html -
-
-
-
+
+
+
+
``` ### Résultat diff --git a/files/fr/web/css/border-bottom-right-radius/index.md b/files/fr/web/css/border-bottom-right-radius/index.md index d0f07a09db685a..93949e2128e370 100644 --- a/files/fr/web/css/border-bottom-right-radius/index.md +++ b/files/fr/web/css/border-bottom-right-radius/index.md @@ -89,10 +89,10 @@ div { ### HTML ```html -
-
-
-
+
+
+
+
``` ### Résultat diff --git a/files/fr/web/css/border-bottom-style/index.md b/files/fr/web/css/border-bottom-style/index.md index 7a975c1b5f9e82..76238ea146054e 100644 --- a/files/fr/web/css/border-bottom-style/index.md +++ b/files/fr/web/css/border-bottom-style/index.md @@ -75,23 +75,44 @@ La propriété `border-bottom-style` se définit avec l'un des mots-clés utilis /* On applique un style sur le tableau */ table { border-width: 2px; - background-color: #52E385; + background-color: #52e385; } -tr, td { +tr, +td { padding: 3px; } /* Des exemples pour border-bottom-style */ -.b1 {border-bottom-style:none;} -.b2 {border-bottom-style:hidden;} -.b3 {border-bottom-style:dotted;} -.b4 {border-bottom-style:dashed;} -.b5 {border-bottom-style:solid;} -.b6 {border-bottom-style:double;} -.b7 {border-bottom-style:groove;} -.b8 {border-bottom-style:ridge;} -.b9 {border-bottom-style:inset;} -.b10 {border-bottom-style:outset;} +.b1 { + border-bottom-style: none; +} +.b2 { + border-bottom-style: hidden; +} +.b3 { + border-bottom-style: dotted; +} +.b4 { + border-bottom-style: dashed; +} +.b5 { + border-bottom-style: solid; +} +.b6 { + border-bottom-style: double; +} +.b7 { + border-bottom-style: groove; +} +.b8 { + border-bottom-style: ridge; +} +.b9 { + border-bottom-style: inset; +} +.b10 { + border-bottom-style: outset; +} ``` ### Résultat diff --git a/files/fr/web/css/border-bottom-width/index.md b/files/fr/web/css/border-bottom-width/index.md index a0176bc6e0bee8..9d12bc81b01ba5 100644 --- a/files/fr/web/css/border-bottom-width/index.md +++ b/files/fr/web/css/border-bottom-width/index.md @@ -55,13 +55,13 @@ border-bottom-width: unset; ### CSS ```css -.element1{ +.element1 { border-bottom: thick solid red; } -.element2{ +.element2 { border-bottom: medium solid orange; } -.element3{ +.element3 { border-bottom: thin solid green; } ``` @@ -69,17 +69,11 @@ border-bottom-width: unset; ### HTML ```html -

- Une bordure épaisse rouge. -

+

Une bordure épaisse rouge.

-

- Une bordure moyenne orange. -

+

Une bordure moyenne orange.

-

- Et une bordure fine verte. -

+

Et une bordure fine verte.

``` ### Résultat diff --git a/files/fr/web/css/border-bottom/index.md b/files/fr/web/css/border-bottom/index.md index 349b67545519ea..f40cd956cd0842 100644 --- a/files/fr/web/css/border-bottom/index.md +++ b/files/fr/web/css/border-bottom/index.md @@ -21,15 +21,15 @@ Ces propriétés permettent de décrire la bordure du côté bas d'un élément. > **Note :** Comme pour les autres propriétés raccourcies, `border-bottom` définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi : > > ```css -> border-bottom-style: dotted; -> border-bottom: thick green; +> border-bottom-style: dotted; +> border-bottom: thick green; > ``` > > est équivalent à : > > ```css -> border-bottom-style: dotted; -> border-bottom: none thick green; +> border-bottom-style: dotted; +> border-bottom: none thick green; > ``` > > et la valeur {{cssxref("border-bottom-style")}} fournie avant `border-bottom` est ignorée. @@ -77,8 +77,7 @@ Les trois valeurs de la propriété raccourcie peuvent être définies dans n'im ```html

- En passant elle prit sur un rayon un pot - de confiture portant cette étiquette, + En passant elle prit sur un rayon un pot de confiture portant cette étiquette, « MARMELADE D’ORANGES. »

``` diff --git a/files/fr/web/css/border-collapse/index.md b/files/fr/web/css/border-collapse/index.md index 60f762504071c8..1a8e72b79df136 100644 --- a/files/fr/web/css/border-collapse/index.md +++ b/files/fr/web/css/border-collapse/index.md @@ -61,54 +61,101 @@ table { border: dashed 6px; border-width: 6px; } -table th, table td { +table th, +table td { border: solid 3px; } -.fx { border-color: orange blue; } -.gk { border-color: black red; } -.ie { border-color: blue gold; } -.tr { border-color: aqua; } -.sa { border-color: silver blue; } -.wk { border-color: gold blue; } -.ch { border-color: red yellow green blue; } -.bk { border-color: navy blue teal aqua; } -.op { border-color: red; } +.fx { + border-color: orange blue; +} +.gk { + border-color: black red; +} +.ie { + border-color: blue gold; +} +.tr { + border-color: aqua; +} +.sa { + border-color: silver blue; +} +.wk { + border-color: gold blue; +} +.ch { + border-color: red yellow green blue; +} +.bk { + border-color: navy blue teal aqua; +} +.op { + border-color: red; +} ``` ### HTML ```html - + - + + + - + + + - + + + - + + + - + + + - + + +
border-collapse: separate + border-collapse: separate +
Navigateur Moteur de rendu
NavigateurMoteur de rendu
Firefox Gecko
FirefoxGecko
Internet Explorer Trident
Internet ExplorerTrident
Safari Webkit
SafariWebkit
Chrome Blink
ChromeBlink
Opera Blink
OperaBlink
- + - + + + - + + + - + + + - + + + - + + + - + + +
border-collapse: collapse + border-collapse: collapse +
Navigateur Moteur de rendu
NavigateurMoteur de rendu
Firefox Gecko
FirefoxGecko
Internet Explorer Trident
Internet ExplorerTrident
Safari Webkit
SafariWebkit
Chrome Blink
ChromeBlink
Opera Blink
OperaBlink
diff --git a/files/fr/web/css/border-color/index.md b/files/fr/web/css/border-color/index.md index b1b625423cea58..f454c830d4caeb 100644 --- a/files/fr/web/css/border-color/index.md +++ b/files/fr/web/css/border-color/index.md @@ -96,7 +96,8 @@ ul { ```html

border-color: red; équivalent à

-
  • border-top-color: red;
    • +
      +
    • border-top-color: red;
    • border-right-color: red;
    • border-bottom-color: red;
    • border-left-color: red;
      • @@ -104,7 +105,8 @@ ul {

border-color: gold red; équivalent à

-
  • border-top-color: gold;
    • +
      +
    • border-top-color: gold;
    • border-right-color: red;
    • border-bottom-color: gold;
    • border-left-color: red;
      • @@ -112,7 +114,8 @@ ul {

border-color: red cyan gold; équivalent à

-
  • border-top-color: red;
    • +
      +
    • border-top-color: red;
    • border-right-color: cyan;
    • border-bottom-color: gold;
    • border-left-color: cyan;
      • @@ -120,7 +123,8 @@ ul {

border-color: red cyan black gold; équivalent à

-
  • border-top-color: red;
    • +
      +
    • border-top-color: red;
    • border-right-color: cyan;
    • border-bottom-color: black;
    • border-left-color: gold;
      • diff --git a/files/fr/web/css/border-image-outset/index.md b/files/fr/web/css/border-image-outset/index.md index 582588f1649f88..98d30dc4058ef2 100644 --- a/files/fr/web/css/border-image-outset/index.md +++ b/files/fr/web/css/border-image-outset/index.md @@ -79,7 +79,7 @@ La propriété `border-image-outset` peut être définie à l'aide d'une, deux, background: #cef; border: 1.4rem solid; border-image: radial-gradient(#ff2, #55f) 40; - border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */ + border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */ margin: 2.1rem; } ``` diff --git a/files/fr/web/css/border-image-repeat/index.md b/files/fr/web/css/border-image-repeat/index.md index 9901f3be767078..56366e31ec7dbf 100644 --- a/files/fr/web/css/border-image-repeat/index.md +++ b/files/fr/web/css/border-image-repeat/index.md @@ -66,7 +66,7 @@ La propriété `border-image-repeat` peut être définie à l'aide d'une ou deux padding: 1rem; border: 40px solid; border-image: url("border.png") 27; - border-image-repeat: stretch; /* Peut être changé avec la liste déroulante */ + border-image-repeat: stretch; /* Peut être changé avec la liste déroulante */ } ``` @@ -86,7 +86,8 @@ La propriété `border-image-repeat` peut être définie à l'aide d'une ou deux ```js hidden var repetition = document.getElementById("repetition"); repetition.addEventListener("change", function (evt) { - document.getElementById("bordered").style.borderImageRepeat = evt.target.value; + document.getElementById("bordered").style.borderImageRepeat = + evt.target.value; }); ``` diff --git a/files/fr/web/css/border-image-slice/index.md b/files/fr/web/css/border-image-slice/index.md index 1e73cad3ebb8f7..846f3beba0a8ff 100644 --- a/files/fr/web/css/border-image-slice/index.md +++ b/files/fr/web/css/border-image-slice/index.md @@ -63,7 +63,7 @@ La valeur optionnelle `fill` peut être utilisée et placée à n'importe quel e - [``](/fr/docs/Web/CSS/percentage) - : Représente un décalage par rapport au bord comme pourcentage par rapport à la taille de l'image source : c'est la largeur de l'image qui sert de référence pour les décalages horizontaux et la hauteur de l'image qui sert de référence pour les décalages verticaux. - `fill` - - : La région au centre de l'image est conservée et celle-ci est affichée comme image d'arrière-plan mais empilée *sous* l'arrière-plan fourni par [`background`](/fr/docs/Web/CSS/background). La largeur et la hauteur sont dimensionnées afin de correspondre aux tailles des régions haute et gauche. + - : La région au centre de l'image est conservée et celle-ci est affichée comme image d'arrière-plan mais empilée _sous_ l'arrière-plan fourni par [`background`](/fr/docs/Web/CSS/background). La largeur et la hauteur sont dimensionnées afin de correspondre aux tailles des régions haute et gauche. ## Définition formelle @@ -104,12 +104,14 @@ Ce sont les valeurs par défaut que nous avons utilisées dans cet exemple. Nous
      • - + 30px
      • - - + + 30
      @@ -142,23 +144,23 @@ li { #### JavaScript ```js -const widthSlider = document.getElementById('width'); -const sliceSlider = document.getElementById('slice'); -const widthOutput = document.getElementById('width-output'); -const sliceOutput = document.getElementById('slice-output'); -const divElem = document.querySelector('div > div'); - -widthSlider.addEventListener('input', () => { - const newValue = widthSlider.value + 'px'; +const widthSlider = document.getElementById("width"); +const sliceSlider = document.getElementById("slice"); +const widthOutput = document.getElementById("width-output"); +const sliceOutput = document.getElementById("slice-output"); +const divElem = document.querySelector("div > div"); + +widthSlider.addEventListener("input", () => { + const newValue = widthSlider.value + "px"; divElem.style.borderWidth = newValue; widthOutput.textContent = newValue; -}) +}); -sliceSlider.addEventListener('input', () => { +sliceSlider.addEventListener("input", () => { const newValue = sliceSlider.value; divElem.style.borderImageSlice = newValue; sliceOutput.textContent = newValue; -}) +}); ``` #### Résultat diff --git a/files/fr/web/css/border-image-width/index.md b/files/fr/web/css/border-image-width/index.md index f71ae4b71561c3..3355de1b9cbe62 100644 --- a/files/fr/web/css/border-image-width/index.md +++ b/files/fr/web/css/border-image-width/index.md @@ -83,10 +83,12 @@ Chaque cercle sur l'image a un diamètre de 30 pixels. #### HTML ```html -

      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, - no sea takimata sanctus est Lorem ipsum dolor sit amet.

      +

      + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy + eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam + voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita + kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. +

      ``` #### CSS diff --git a/files/fr/web/css/border-image/index.md b/files/fr/web/css/border-image/index.md index 891f351ec4b408..c43d3bdba5bb2d 100644 --- a/files/fr/web/css/border-image/index.md +++ b/files/fr/web/css/border-image/index.md @@ -107,7 +107,9 @@ On découpe l'image et on la répète pour remplir la zone entre les bordures. #### HTML ```html -
      L'image formée par le dégradé est étirée pour remplir la zone.
      +
      + L'image formée par le dégradé est étirée pour remplir la zone. +
      ``` #### CSS @@ -138,11 +140,11 @@ On découpe l'image et on la répète pour remplir la zone entre les bordures. - [`outline`](/fr/docs/Web/CSS/outline) - [`box-shadow`](/fr/docs/Web/CSS/box-shadow) - [`background-image`](/fr/docs/Web/CSS/background-image) -- La fonction [`url()`](/fr/docs/Web/CSS/url()) +- La fonction [`url()`]() - Fonctions pour les dégradés : - - [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient()) - - [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient()) - - [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()) - - [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient()) - - [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) + - [`conic-gradient()`]() + - [`linear-gradient()`]() + - [`repeating-linear-gradient()`]() + - [`radial-gradient()`]() + - [`repeating-radial-gradient()`]() diff --git a/files/fr/web/css/border-inline-color/index.md b/files/fr/web/css/border-inline-color/index.md index 0bb4bd689ac029..b8654639b77f7c 100644 --- a/files/fr/web/css/border-inline-color/index.md +++ b/files/fr/web/css/border-inline-color/index.md @@ -10,7 +10,7 @@ La propriété **`border-inline-color`** définit la couleur de la bordure d'un ```css border-inline-color: yellow; -border-inline-color: #F5F6F7; +border-inline-color: #f5f6f7; ``` Pour définir la couleur de la bordure sur l'autre dimension, on pourra utiliser la propriété logique {{cssxref("border-block-color")}} qui définit {{cssxref("border-block-start-color")}} et {{cssxref("border-block-end-color")}}. diff --git a/files/fr/web/css/border-left-color/index.md b/files/fr/web/css/border-left-color/index.md index 16caafb8f2331e..2bf4f805ca3bae 100644 --- a/files/fr/web/css/border-left-color/index.md +++ b/files/fr/web/css/border-left-color/index.md @@ -62,9 +62,10 @@ border-left-color: unset; ```html
      -

      Une boîte avec une bordure autour. - Notez le côté de la boîte qui est - rouge.

      +

      + Une boîte avec une bordure autour. Notez le côté de la boîte qui est + rouge. +

      ``` From 8fd0c16d6c577aac3ff442722e6854ab914502dc Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Wed, 26 Jul 2023 23:41:25 -0700 Subject: [PATCH 26/31] fr: Format /web/css using Prettier (part 5) (#14630) --- .../using_css_transforms/index.md | 340 ++++++------ .../using_css_transitions/index.md | 68 ++- files/fr/web/css/cursor/index.md | 21 +- .../fr/web/css/descendant_combinator/index.md | 4 +- files/fr/web/css/direction/index.md | 5 +- files/fr/web/css/display-inside/index.md | 2 +- files/fr/web/css/display-listitem/index.md | 2 +- files/fr/web/css/display-outside/index.md | 3 +- files/fr/web/css/display/index.md | 8 +- files/fr/web/css/easing-function/index.md | 8 +- files/fr/web/css/element/index.md | 25 +- files/fr/web/css/empty-cells/index.md | 35 +- files/fr/web/css/env/index.md | 26 +- .../fr/web/css/filter-function/blur/index.md | 18 +- .../css/filter-function/brightness/index.md | 18 +- .../web/css/filter-function/contrast/index.md | 18 +- .../css/filter-function/drop-shadow/index.md | 18 +- .../css/filter-function/grayscale/index.md | 18 +- .../css/filter-function/hue-rotate/index.md | 18 +- files/fr/web/css/filter-function/index.md | 89 ++-- .../web/css/filter-function/invert/index.md | 18 +- .../web/css/filter-function/opacity/index.md | 18 +- .../web/css/filter-function/saturate/index.md | 18 +- .../fr/web/css/filter-function/sepia/index.md | 18 +- files/fr/web/css/filter/index.md | 495 +++++++++++------- files/fr/web/css/fit-content/index.md | 4 +- files/fr/web/css/flex-basis/index.md | 18 +- files/fr/web/css/flex-direction/index.md | 12 +- files/fr/web/css/flex-flow/index.md | 2 - files/fr/web/css/flex-grow/index.md | 4 +- files/fr/web/css/flex-shrink/index.md | 2 +- files/fr/web/css/flex-wrap/index.md | 6 +- files/fr/web/css/flex/index.md | 60 +-- files/fr/web/css/font-family/index.md | 46 +- .../fr/web/css/font-feature-settings/index.md | 36 +- files/fr/web/css/font-kerning/index.md | 13 +- .../web/css/font-language-override/index.md | 6 +- files/fr/web/css/font-optical-sizing/index.md | 22 +- files/fr/web/css/font-size-adjust/index.md | 13 +- files/fr/web/css/font-size/index.md | 16 +- files/fr/web/css/font-style/index.md | 1 + files/fr/web/css/font-synthesis/index.md | 4 +- .../web/css/font-variant-alternates/index.md | 7 +- files/fr/web/css/font-variant-caps/index.md | 8 +- .../web/css/font-variant-east-asian/index.md | 14 +- .../web/css/font-variant-ligatures/index.md | 45 +- .../fr/web/css/font-variant-numeric/index.md | 12 +- .../fr/web/css/font-variant-position/index.md | 9 +- files/fr/web/css/font-weight/index.md | 14 +- files/fr/web/css/font/index.md | 32 +- files/fr/web/css/gap/index.md | 7 +- .../web/css/gradient/conic-gradient/index.md | 17 +- files/fr/web/css/gradient/index.md | 75 ++- .../web/css/gradient/linear-gradient/index.md | 30 +- .../web/css/gradient/radial-gradient/index.md | 19 +- .../repeating-conic-gradient/index.md | 16 +- .../repeating-linear-gradient/index.md | 30 +- .../repeating-radial-gradient/index.md | 33 +- files/fr/web/css/grid-auto-flow/index.md | 4 +- files/fr/web/css/grid-auto-rows/index.md | 1 - files/fr/web/css/grid-column-end/index.md | 4 +- files/fr/web/css/grid-column-start/index.md | 4 +- files/fr/web/css/grid-row-end/index.md | 4 +- files/fr/web/css/grid-row-start/index.md | 4 +- files/fr/web/css/grid-template-areas/index.md | 12 +- .../fr/web/css/grid-template-columns/index.md | 17 +- files/fr/web/css/grid-template-rows/index.md | 18 +- files/fr/web/css/grid-template/index.md | 26 +- files/fr/web/css/hanging-punctuation/index.md | 15 +- files/fr/web/css/hyphens/index.md | 12 +- files/fr/web/css/id_selectors/index.md | 1 - files/fr/web/css/image-orientation/index.md | 20 +- files/fr/web/css/image/image-set/index.md | 3 +- files/fr/web/css/image/image/index.md | 26 +- files/fr/web/css/image/index.md | 22 +- files/fr/web/css/image/paint/index.md | 14 +- files/fr/web/css/index.md | 2 +- files/fr/web/css/inherit/index.md | 14 +- files/fr/web/css/inheritance/index.md | 2 +- .../fr/web/css/initial-letter-align/index.md | 11 +- files/fr/web/css/initial-letter/index.md | 16 +- files/fr/web/css/initial/index.md | 12 +- files/fr/web/css/isolation/index.md | 2 +- files/fr/web/css/justify-content/index.md | 21 +- files/fr/web/css/justify-items/index.md | 18 +- files/fr/web/css/justify-self/index.md | 18 +- .../contribute_a_recipe/index.md | 14 +- files/fr/web/css/layout_cookbook/index.md | 24 +- .../css/layout_cookbook/pagination/index.md | 2 +- files/fr/web/css/left/index.md | 36 +- files/fr/web/css/letter-spacing/index.md | 18 +- files/fr/web/css/line-height/index.md | 26 +- files/fr/web/css/list-style-image/index.md | 4 +- files/fr/web/css/list-style-position/index.md | 9 +- files/fr/web/css/list-style-type/index.md | 288 +++++++--- files/fr/web/css/list-style/index.md | 11 +- files/fr/web/css/margin-block-end/index.md | 6 +- files/fr/web/css/margin-block-start/index.md | 6 +- files/fr/web/css/margin-block/index.md | 8 +- files/fr/web/css/margin-bottom/index.md | 36 +- 100 files changed, 1624 insertions(+), 1131 deletions(-) diff --git a/files/fr/web/css/css_transforms/using_css_transforms/index.md b/files/fr/web/css/css_transforms/using_css_transforms/index.md index 2cfa37a1f84f1f..36d13311b3d07b 100644 --- a/files/fr/web/css/css_transforms/using_css_transforms/index.md +++ b/files/fr/web/css/css_transforms/using_css_transforms/index.md @@ -32,9 +32,10 @@ Voici une version originale du logo MDN : Ici, on le tourne de 90 degrés depuis le coin inférieur gauche : ```html - + src="logo.png" /> ``` {{EmbedLiveSample('', 'auto', 250)}} @@ -44,9 +45,10 @@ Ici, on le tourne de 90 degrés depuis le coin inférieur gauche : Ici, on applique une distorsion de 10 degrés et on translate l'image de 150 pixels sur l'axe des abscisses : ```html - + src="logo.png" /> ``` {{EmbedLiveSample('')}} @@ -71,10 +73,8 @@ Le fragment HTML qui suit crée quatre copies de la même boîte, chacune ayant - - + + - - + + - + - - + + - +
      perspective: 250px; - perspective: 350px; - perspective: 250px;perspective: 350px;
      @@ -103,10 +103,8 @@ Le fragment HTML qui suit crée quatre copies de la même boîte, chacune ayant
      perspective: 500px; - perspective: 650px; - perspective: 500px;perspective: 650px;
      @@ -222,8 +220,10 @@ Ce fragment de code CSS utilise des classes pour chacune des perspectives et d'a } /* Et on rend le tableau un peu plus joli */ -th, p, td { - background-color: #EEEEEE; +th, +p, +td { + background-color: #eeeeee; padding: 10px; font-family: sans-serif; text-align: left; @@ -244,175 +244,173 @@ Dans cet exemple, on illustre les valeurs les plus communes `perspective-origin` ```html
      - -
      -
      perspective-origin: top left;
      +
      +
      perspective-origin: top left;
      -
      -
      1
      -
      2
      -
      3
      -
      4
      -
      5
      -
      6
      -
      -
      -
      - -
      -
      perspective-origin: top;
      -
      -
      -
      1
      -
      2
      -
      3
      -
      4
      -
      5
      -
      6
      +
      +
      1
      +
      2
      +
      3
      +
      4
      +
      5
      +
      6
      +
      -
      -
      - -
      -
      perspective-origin: top right;
      -
      -
      -
      1
      -
      2
      -
      3
      -
      4
      -
      5
      -
      6
      +
      + +
      +
      perspective-origin: top;
      +
      +
      +
      1
      +
      2
      +
      3
      +
      4
      +
      5
      +
      6
      +
      - -
      - -
      -
      perspective-origin: left;
      -
      -
      -
      1
      -
      2
      -
      3
      -
      4
      -
      5
      -
      6
      +
      + +
      +
      perspective-origin: top right;
      +
      +
      +
      1
      +
      2
      +
      3
      +
      4
      +
      5
      +
      6
      +
      - -
      - -
      -
      perspective-origin: 50% 50%;
      -
      -
      -
      1
      -
      2
      -
      3
      -
      4
      -
      5
      -
      6
      +
      + +
      +
      perspective-origin: left;
      +
      +
      +
      1
      +
      2
      +
      3
      +
      4
      +
      5
      +
      6
      +
      - -
      - -
      -
      perspective-origin: right;
      -
      -
      -
      1
      -
      2
      -
      3
      -
      4
      -
      5
      -
      6
      +
      + +
      +
      perspective-origin: 50% 50%;
      +
      +
      +
      1
      +
      2
      +
      3
      +
      4
      +
      5
      +
      6
      +
      - -
      - -
      -
      perspective-origin: bottom left;
      -
      -
      -
      1
      -
      2
      -
      3
      -
      4
      -
      5
      -
      6
      +
      + +
      +
      perspective-origin: right;
      +
      +
      +
      1
      +
      2
      +
      3
      +
      4
      +
      5
      +
      6
      +
      - -
      - -
      -
      perspective-origin: bottom;
      -
      -
      -
      1
      -
      2
      -
      3
      -
      4
      -
      5
      -
      6
      +
      + +
      +
      perspective-origin: bottom left;
      +
      +
      +
      1
      +
      2
      +
      3
      +
      4
      +
      5
      +
      6
      +
      - -
      - -
      -
      perspective-origin: bottom right;
      -
      -
      -
      1
      -
      2
      -
      3
      -
      4
      -
      5
      -
      6
      +
      + +
      +
      perspective-origin: bottom;
      +
      +
      +
      1
      +
      2
      +
      3
      +
      4
      +
      5
      +
      6
      +
      - -
      - -
      -
      perspective-origin: -200% -200%;
      -
      -
      -
      1
      -
      2
      -
      3
      -
      4
      -
      5
      -
      6
      +
      + +
      +
      perspective-origin: bottom right;
      +
      +
      +
      1
      +
      2
      +
      3
      +
      4
      +
      5
      +
      6
      +
      - -
      - -
      -
      perspective-origin: 200% 200%;
      -
      -
      -
      1
      -
      2
      -
      3
      -
      4
      -
      5
      -
      6
      +
      + +
      +
      perspective-origin: -200% -200%;
      +
      +
      +
      1
      +
      2
      +
      3
      +
      4
      +
      5
      +
      6
      +
      - -
      - -
      -
      perspective-origin: 200% -200%;
      -
      -
      -
      1
      -
      2
      -
      3
      -
      4
      -
      5
      -
      6
      +
      + +
      +
      perspective-origin: 200% 200%;
      +
      +
      +
      1
      +
      2
      +
      3
      +
      4
      +
      5
      +
      6
      +
      - -
      +
      +
      +
      perspective-origin: 200% -200%;
      +
      +
      +
      1
      +
      2
      +
      3
      +
      4
      +
      5
      +
      6
      +
      +
      +
      ``` @@ -515,7 +513,7 @@ Dans cet exemple, on illustre les valeurs les plus communes `perspective-origin` /* On agence le tout de façon plus agréable */ section { - background-color: #EEE; + background-color: #eee; padding: 10px; font-family: sans-serif; text-align: left; diff --git a/files/fr/web/css/css_transitions/using_css_transitions/index.md b/files/fr/web/css/css_transitions/using_css_transitions/index.md index ffa70e4e1c6cbb..9908b90e9459cb 100644 --- a/files/fr/web/css/css_transitions/using_css_transitions/index.md +++ b/files/fr/web/css/css_transitions/using_css_transitions/index.md @@ -73,8 +73,12 @@ Avec cette feuille de style, on opère une transition CSS sur la taille de polic ```html hidden -

      La boîte ci-dessous utilise des transitions pour les propriétés : width, height, background-color, transform. Survolez la boîte pour voir les animations.

      -
      Sample
      +

      + La boîte ci-dessous utilise des transitions pour les propriétés : width, + height, background-color, transform. Survolez la boîte pour voir les + animations. +

      +
      Sample
      ``` @@ -82,20 +86,24 @@ Avec cette feuille de style, on opère une transition CSS sur la taille de polic ```css .box { - border-style: solid; - border-width: 1px; - display: block; - width: 100px; - height: 100px; - background-color: #0000FF; - transition: width 2s, height 2s, background-color 2s, transform 2s; + border-style: solid; + border-width: 1px; + display: block; + width: 100px; + height: 100px; + background-color: #0000ff; + transition: + width 2s, + height 2s, + background-color 2s, + transform 2s; } .box:hover { - background-color: #FFCCCC; - width: 200px; - height: 200px; - transform: rotate(180deg); + background-color: #ffcccc; + width: 200px; + height: 200px; + transform: rotate(180deg); } ``` @@ -112,12 +120,16 @@ Avec cette feuille de style, on opère une transition CSS sur la taille de polic display: block; width: 100px; height: 100px; - background-color: #0000FF; - transition: width 2s, height 2s, background-color 2s, transform 2s; + background-color: #0000ff; + transition: + width 2s, + height 2s, + background-color 2s, + transform 2s; } .box:hover { - background-color: #FFCCCC; + background-color: #ffcccc; width: 200px; height: 200px; transform: rotate(180deg); @@ -127,8 +139,10 @@ Avec cette feuille de style, on opère une transition CSS sur la taille de polic #### HTML ```html -

      Cette boîte utilisera des transitions pour width, height, background-color, transform. - Survolez cette boîte pour voir l'effet.

      +

      + Cette boîte utilisera des transitions pour width, height, background-color, + transform. Survolez cette boîte pour voir l'effet. +

      ``` @@ -160,8 +174,8 @@ De même, si la liste est trop longue par rapport à {{cssxref("transition-prope ```css div { - transition-property: opacity, left; - transition-duration: 3s, 5s, 2s, 1s; + transition-property: opacity, left; + transition-duration: 3s, 5s, 2s, 1s; } ``` @@ -252,11 +266,15 @@ Les transitions permettent de lisser les opérations effectuées avec JavaScript Avec JavaScript, on peut ajouter un effet de mouvement sur la balle : ```js -var f = document.getElementById('foo'); -document.addEventListener('click', function(ev){ - f.style.transform = 'translateY('+(ev.clientY-25)+'px)'; - f.style.transform += 'translateX('+(ev.clientX-25)+'px)'; -},false); +var f = document.getElementById("foo"); +document.addEventListener( + "click", + function (ev) { + f.style.transform = "translateY(" + (ev.clientY - 25) + "px)"; + f.style.transform += "translateX(" + (ev.clientX - 25) + "px)"; + }, + false, +); ``` Avec CSS, il suffit d'ajouter une transition à l'élément et chaque modification sera appliquée de façon régulière : diff --git a/files/fr/web/css/cursor/index.md b/files/fr/web/css/cursor/index.md index 1d7bd1599e2718..19b068a2aee9eb 100644 --- a/files/fr/web/css/cursor/index.md +++ b/files/fr/web/css/cursor/index.md @@ -21,8 +21,12 @@ cursor: auto; cursor: url(hand.cur), pointer; /* Une valeur d'URL avec des coordonnées et un mot-clé par défaut */ -cursor: url(cursor1.png) 4 12, auto; -cursor: url(cursor2.png) 2 2, pointer; +cursor: + url(cursor1.png) 4 12, + auto; +cursor: + url(cursor2.png) 2 2, + pointer; /* Valeurs globales */ cursor: inherit; @@ -37,7 +41,10 @@ Chaque `` peut éventuellement être suivi par un couple de nombres sépar Par exemple, on peut indiquer deux images grâce à deux valeurs `` et fournir des coordonnées `` pour la deuxième. Si aucune des images n'a pu être chargée, on recourt au mot-clé `progress` : ```css -cursor: url(one.svg), url(two.svg) 5 5, progress; +cursor: + url(one.svg), + url(two.svg) 5 5, + progress; ``` ### Valeurs @@ -384,13 +391,9 @@ Pour plus d'informations, voir le tableau de compatibilité ci-après. ### HTML ```html -

      - On dirait qu'on pourrait sélectionner une zone. -

      +

      On dirait qu'on pourrait sélectionner une zone.

      -

      - Et là on peut zoomer. -

      +

      Et là on peut zoomer.

      ``` ### Résultat diff --git a/files/fr/web/css/descendant_combinator/index.md b/files/fr/web/css/descendant_combinator/index.md index 3e5b48ada4c78f..953a8e9711c03a 100644 --- a/files/fr/web/css/descendant_combinator/index.md +++ b/files/fr/web/css/descendant_combinator/index.md @@ -21,7 +21,9 @@ Techniquement, le combinateur de descendance est représenté par un ou plusieur ## Syntaxe ```css -selecteur1 selecteur2 { /* déclarations CSS */ } +selecteur1 selecteur2 { + /* déclarations CSS */ +} ``` ## Exemples diff --git a/files/fr/web/css/direction/index.md b/files/fr/web/css/direction/index.md index 73c9c3768516a8..71ebf605cdebe7 100644 --- a/files/fr/web/css/direction/index.md +++ b/files/fr/web/css/direction/index.md @@ -59,9 +59,8 @@ blockquote { ```html
      - Du reste, depuis son bain dans la mare aux larmes, - tout était changé : la salle, la table de verre, et - la petite porte avaient complétement disparu. + Du reste, depuis son bain dans la mare aux larmes, tout était changé : la + salle, la table de verre, et la petite porte avaient complétement disparu.
      ``` diff --git a/files/fr/web/css/display-inside/index.md b/files/fr/web/css/display-inside/index.md index ad39ac075b5bad..9f5d790be6ec64 100644 --- a/files/fr/web/css/display-inside/index.md +++ b/files/fr/web/css/display-inside/index.md @@ -55,7 +55,7 @@ Dans l'exemple qui suit, la boîte parente est ciblée avec `display: flow-root` width: 200px; height: 150px; background-color: white; - border:1px solid black; + border: 1px solid black; padding: 10px; } ``` diff --git a/files/fr/web/css/display-listitem/index.md b/files/fr/web/css/display-listitem/index.md index 0955c993764ed0..8aa4d9bcfccebd 100644 --- a/files/fr/web/css/display-listitem/index.md +++ b/files/fr/web/css/display-listitem/index.md @@ -6,7 +6,7 @@ translation_of: Web/CSS/display-listitem {{CSSRef}} -Le mot-clé `list-item` permet à un élément de générer un pseudo-élément `::marker` dont le contenu est défini par les propriétés {{cssxref("list-style")}} (pour afficher une puce par exemple) avec une boîte principale du type indiquée pour organiser le contenu de l'élément. +Le mot-clé `list-item` permet à un élément de générer un pseudo-élément `::marker` dont le contenu est défini par les propriétés {{cssxref("list-style")}} (pour afficher une puce par exemple) avec une boîte principale du type indiquée pour organiser le contenu de l'élément. ## Syntaxe diff --git a/files/fr/web/css/display-outside/index.md b/files/fr/web/css/display-outside/index.md index d54e523782c77d..8f7126da822857 100644 --- a/files/fr/web/css/display-outside/index.md +++ b/files/fr/web/css/display-outside/index.md @@ -48,8 +48,7 @@ span { ### HTML ```html -span 1 -span 2 +span 1 span 2 ``` ### Résultat diff --git a/files/fr/web/css/display/index.md b/files/fr/web/css/display/index.md index 811b38e51276a0..43e366b6613501 100644 --- a/files/fr/web/css/display/index.md +++ b/files/fr/web/css/display/index.md @@ -128,12 +128,8 @@ En plus de l'exemple qui suit, vous pouvez voir d'autres exemples sur les sectio ### HTML ```html -

      - Texte visible -

      -

      - Texte invisible -

      +

      Texte visible

      +

      Texte invisible

      ``` ### CSS diff --git a/files/fr/web/css/easing-function/index.md b/files/fr/web/css/easing-function/index.md index f1d6a04e9b988f..2060932ff7fcfc 100644 --- a/files/fr/web/css/easing-function/index.md +++ b/files/fr/web/css/easing-function/index.md @@ -205,7 +205,11 @@ div > div { width: 50px; height: 50px; background-color: blue; - background-image: radial-gradient(circle at 10px 10px, rgba(25,255,255,0.8),rgba(25,255,255,0.4)); + background-image: radial-gradient( + circle at 10px 10px, + rgba(25, 255, 255, 0.8), + rgba(25, 255, 255, 0.4) + ); border-radius: 50%; top: 25px; animation: 1.5s infinite alternate; @@ -237,7 +241,7 @@ const startBtn = document.querySelector("button"); const divElem = document.querySelector("div > div"); startBtn.addEventListener("click", () => { - if(startBtn.textContent === "Démarrer l'animation") { + if (startBtn.textContent === "Démarrer l'animation") { divElem.style.animationName = "move-right"; startBtn.textContent = "Arrêter l'animation"; divElem.style.animationTimingFunction = selectElem.value; diff --git a/files/fr/web/css/element/index.md b/files/fr/web/css/element/index.md index cc18e3ddf1dc9b..2afdb7c2c17f87 100644 --- a/files/fr/web/css/element/index.md +++ b/files/fr/web/css/element/index.md @@ -34,7 +34,6 @@ element(id) width: 400px; height: 400px; background: -moz-element(#monArrierePlan) no-repeat; - } .paragraphe { @@ -43,7 +42,7 @@ element(id) color: white; } -#monArrierePlan{ +#monArrierePlan { width: 1024px; height: 1024px; background-image: linear-gradient(to right, red, orange, yellow, white); @@ -58,21 +57,17 @@ element(id) ```html
      -

      - Cet élément utilise l'élément - #monArrierePlan comme image - de fond ! -

      +

      Cet élément utilise l'élément #monArrierePlan comme image de fond !

      -

      - Et voici un texte inscrit sur - l'arrière-plan. -

      -
      -
      +

      Et voici un texte inscrit sur l'arrière-plan.

      +
      +
      +
      +
      +
      ``` #### Résultat @@ -104,9 +99,7 @@ Pour les navigateurs qui prennent en charge `element`, on peut ici voir un arri
      - +
      ``` diff --git a/files/fr/web/css/empty-cells/index.md b/files/fr/web/css/empty-cells/index.md index 5d08670c647427..d6e054bc9c3c0a 100644 --- a/files/fr/web/css/empty-cells/index.md +++ b/files/fr/web/css/empty-cells/index.md @@ -48,24 +48,24 @@ Cette propriété se définit avec l'un des mots-clés suivants. ```html - - - - - - - - + + + + + + + +
      JeanBiche
      Alice
      JeanBiche
      Alice
      - - - - - - - - + + + + + + + +
      JeanBiche
      Alice
      JeanBiche
      Alice
      ``` @@ -79,7 +79,8 @@ Cette propriété se définit avec l'un des mots-clés suivants. empty-cells: hide; } -td, th { +td, +th { border: 1px solid #999; padding: 0.5rem; } diff --git a/files/fr/web/css/env/index.md b/files/fr/web/css/env/index.md index d939b6d346f90c..22bb1d2782bf18 100644 --- a/files/fr/web/css/env/index.md +++ b/files/fr/web/css/env/index.md @@ -12,11 +12,10 @@ La fonction CSS **`env()`** peut être utilisée afin d'insérer la valeur d'une ```css body { - padding: - env(safe-area-inset-top, 20px) - env(safe-area-inset-right, 20px) - env(safe-area-inset-bottom, 20px) - env(safe-area-inset-left, 20px); + padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env( + safe-area-inset-bottom, + 20px + ) env(safe-area-inset-left, 20px); } ``` @@ -59,10 +58,10 @@ Dans l'exemple qui suit, on utilise le deuxième paramètre de la notation fonct ```html

      - Si la fonction env() est prise en charge dans votre - navigateur, le texte de ce paragraphe aura 50 pixels de padding avec - la bordure gauche mais pas la droite / basse et haute. - En effet, le code CSS associé est équivalent à padding: 0 0 0 50px + Si la fonction env() est prise en charge dans votre navigateur, + le texte de ce paragraphe aura 50 pixels de padding avec la bordure gauche + mais pas la droite / basse et haute. En effet, le code CSS associé est + équivalent à padding: 0 0 0 50px car les noms des propriétés CSS associées aux agents utilisateurs sont sensibles à la casse (contrairement aux autres propriétés).

      @@ -74,11 +73,10 @@ Dans l'exemple qui suit, on utilise le deuxième paramètre de la notation fonct p { width: 300px; border: 2px solid red; - padding: - env(safe-area-inset-top, 50px) - env(safe-area-inset-right, 50px) - env(safe-area-inset-bottom, 50px) - env(SAFE-AREA-INSET-LEFT, 50px); + padding: env(safe-area-inset-top, 50px) env(safe-area-inset-right, 50px) env( + safe-area-inset-bottom, + 50px + ) env(SAFE-AREA-INSET-LEFT, 50px); } ``` diff --git a/files/fr/web/css/filter-function/blur/index.md b/files/fr/web/css/filter-function/blur/index.md index 212f300cd44d9d..2fcd118d34fcce 100644 --- a/files/fr/web/css/filter-function/blur/index.md +++ b/files/fr/web/css/filter-function/blur/index.md @@ -42,12 +42,12 @@ blur(1.17rem); /* Un flou avec un rayon de 1.17rem */ ## Voir aussi - [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) + - [`brightness()`]() + - [`contrast()`]() + - [`drop-shadow()`]() + - [`grayscale()`]() + - [`hue-rotate()`]() + - [`invert()`]() + - [`opacity()`]() + - [`saturate()`]() + - [`sepia()`]() diff --git a/files/fr/web/css/filter-function/brightness/index.md b/files/fr/web/css/filter-function/brightness/index.md index a2fbf57c27a883..79697312aa3875 100644 --- a/files/fr/web/css/filter-function/brightness/index.md +++ b/files/fr/web/css/filter-function/brightness/index.md @@ -43,12 +43,12 @@ brightness(200%) /* Double la clarté */ ## Voir aussi - [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) + - [`blur()`]() + - [`contrast()`]() + - [`drop-shadow()`]() + - [`grayscale()`]() + - [`hue-rotate()`]() + - [`invert()`]() + - [`opacity()`]() + - [`saturate()`]() + - [`sepia()`]() diff --git a/files/fr/web/css/filter-function/contrast/index.md b/files/fr/web/css/filter-function/contrast/index.md index 167e7604b02bff..3148ae53bf6a88 100644 --- a/files/fr/web/css/filter-function/contrast/index.md +++ b/files/fr/web/css/filter-function/contrast/index.md @@ -43,12 +43,12 @@ contrast(200%); /* Contraste doublé */ ## Voir aussi - [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) + - [`blur()`]() + - [`brightness()`]() + - [`drop-shadow()`]() + - [`grayscale()`]() + - [`hue-rotate()`]() + - [`invert()`]() + - [`opacity()`]() + - [`saturate()`]() + - [`sepia()`]() diff --git a/files/fr/web/css/filter-function/drop-shadow/index.md b/files/fr/web/css/filter-function/drop-shadow/index.md index c2ceb982543c16..eaac163552e271 100644 --- a/files/fr/web/css/filter-function/drop-shadow/index.md +++ b/files/fr/web/css/filter-function/drop-shadow/index.md @@ -58,13 +58,13 @@ drop-shadow(.5rem .5rem 1rem #e23) ## Voir aussi - [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) + - [`blur()`]() + - [`brightness()`]() + - [`contrast()`]() + - [`grayscale()`]() + - [`hue-rotate()`]() + - [`invert()`]() + - [`opacity()`]() + - [`saturate()`]() + - [`sepia()`]() - La propriété CSS [`box-shadow`](/fr/docs/Web/CSS/box-shadow) diff --git a/files/fr/web/css/filter-function/grayscale/index.md b/files/fr/web/css/filter-function/grayscale/index.md index c97a653023960f..7d0c50fd09b5ec 100644 --- a/files/fr/web/css/filter-function/grayscale/index.md +++ b/files/fr/web/css/filter-function/grayscale/index.md @@ -42,12 +42,12 @@ grayscale(100%) /* Uniquement en niveaux de gris */ ## Voir aussi - [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) + - [`blur()`]() + - [`brightness()`]() + - [`contrast()`]() + - [`drop-shadow()`]() + - [`hue-rotate()`]() + - [`invert()`]() + - [`opacity()`]() + - [`saturate()`]() + - [`sepia()`]() diff --git a/files/fr/web/css/filter-function/hue-rotate/index.md b/files/fr/web/css/filter-function/hue-rotate/index.md index 7d3ba525779a90..8babede3b6d6b6 100644 --- a/files/fr/web/css/filter-function/hue-rotate/index.md +++ b/files/fr/web/css/filter-function/hue-rotate/index.md @@ -44,12 +44,12 @@ hue-rotate(405deg); /* Correspond à une rotation de 45deg */ ## Voir aussi - [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) + - [`blur()`]() + - [`brightness()`]() + - [`contrast()`]() + - [`drop-shadow()`]() + - [`grayscale()`]() + - [`invert()`]() + - [`opacity()`]() + - [`saturate()`]() + - [`sepia()`]() diff --git a/files/fr/web/css/filter-function/index.md b/files/fr/web/css/filter-function/index.md index 75271c9ae88d54..0e9cacf7ba777b 100644 --- a/files/fr/web/css/filter-function/index.md +++ b/files/fr/web/css/filter-function/index.md @@ -12,25 +12,25 @@ Le type de donnée **``** représente un effet graphique qui pe Une valeur de type `` se construit avec l'une des fonctions listées ci-après. Chaque fonction utilise un argument et si celui-ci est invalide, aucun filtre n'est appliqué. -- [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) +- [`blur()`]() - : Ajoute un flou sur l'image. -- [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) +- [`brightness()`]() - : Rend l'image plus claire ou plus sombre. -- [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) +- [`contrast()`]() - : Augmente ou diminue le contraste de l'image. -- [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) +- [`drop-shadow()`]() - : Applique une ombre portée derrière l'image. -- [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) +- [`grayscale()`]() - : Convertit l'image en niveaux de gris. -- [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) +- [`hue-rotate()`]() - : Modifie la teinte globale de l'image. -- [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) +- [`invert()`]() - : Inverse les couleurs de l'image. -- [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) +- [`opacity()`]() - : Rend l'image transparente. -- [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) +- [`saturate()`]() - : Sursature ou désature l'image. -- [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) +- [`sepia()`]() - : Convertit l'image en sépia. ## Exemples @@ -59,9 +59,7 @@ Cet exemple fournit une image ainsi qu'un menu pour expérimenter les différent -
    • - -
      • +

    • Valeur CSS actuelle :

      • @@ -74,7 +72,8 @@ Cet exemple fournit une image ainsi qu'un menu pour expérimenter les différent div { width: 300px; height: 300px; - background: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center; + background: url(https://mdn.dev/archives/media/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) + no-repeat center; } li { @@ -85,7 +84,7 @@ li { } input { - width: 60% + width: 60%; } output { @@ -102,66 +101,82 @@ select { #### JavaScript ```js -const selectElem = document.querySelector('select'); -const divElem = document.querySelector('div'); -const slider = document.querySelector('input'); -const output = document.querySelector('output'); -const curValue = document.querySelector('p code'); +const selectElem = document.querySelector("select"); +const divElem = document.querySelector("div"); +const slider = document.querySelector("input"); +const output = document.querySelector("output"); +const curValue = document.querySelector("p code"); -selectElem.addEventListener('change', () => { +selectElem.addEventListener("change", () => { setSlider(selectElem.value); setDiv(selectElem.value); }); -slider.addEventListener('input', () => { +slider.addEventListener("input", () => { setDiv(selectElem.value); }); function setSlider(filter) { - if(filter === 'blur') { + if (filter === "blur") { slider.value = 0; slider.min = 0; slider.max = 30; slider.step = 1; - slider.setAttribute('data-unit', 'px'); - } else if(filter === 'brightness' || filter === 'contrast' || filter === 'saturate') { + slider.setAttribute("data-unit", "px"); + } else if ( + filter === "brightness" || + filter === "contrast" || + filter === "saturate" + ) { slider.value = 1; slider.min = 0; slider.max = 4; slider.step = 0.05; - slider.setAttribute('data-unit', ''); - } else if(filter === 'drop-shadow') { + slider.setAttribute("data-unit", ""); + } else if (filter === "drop-shadow") { slider.value = 0; slider.min = -20; slider.max = 40; slider.step = 1; - slider.setAttribute('data-unit', 'px'); - } else if(filter === 'opacity') { + slider.setAttribute("data-unit", "px"); + } else if (filter === "opacity") { slider.value = 1; slider.min = 0; slider.max = 1; slider.step = 0.01; - slider.setAttribute('data-unit', ''); - } else if(filter === 'grayscale' || filter === 'invert' || filter === 'sepia') { + slider.setAttribute("data-unit", ""); + } else if ( + filter === "grayscale" || + filter === "invert" || + filter === "sepia" + ) { slider.value = 0; slider.min = 0; slider.max = 1; slider.step = 0.01; - slider.setAttribute('data-unit', ''); - } else if(filter === 'hue-rotate') { + slider.setAttribute("data-unit", ""); + } else if (filter === "hue-rotate") { slider.value = 0; slider.min = 0; slider.max = 360; slider.step = 1; - slider.setAttribute('data-unit', 'deg'); + slider.setAttribute("data-unit", "deg"); } } function setDiv(filter) { - if(filter === 'drop-shadow') { - divElem.style.filter = `${selectElem.value}(${Math.round(slider.value)}${slider.getAttribute('data-unit')} ${Math.round(slider.value)}${slider.getAttribute('data-unit')} ${Math.round(Math.abs(slider.value/2))}${slider.getAttribute('data-unit')})`; + if (filter === "drop-shadow") { + divElem.style.filter = `${selectElem.value}(${Math.round( + slider.value, + )}${slider.getAttribute("data-unit")} ${Math.round( + slider.value, + )}${slider.getAttribute("data-unit")} ${Math.round( + Math.abs(slider.value / 2), + )}${slider.getAttribute("data-unit")})`; } else { - divElem.style.filter = `${selectElem.value}(${slider.value}${slider.getAttribute('data-unit')}`; + divElem.style.filter = `${selectElem.value}(${ + slider.value + }${slider.getAttribute("data-unit")}`; } updateOutput(); diff --git a/files/fr/web/css/filter-function/invert/index.md b/files/fr/web/css/filter-function/invert/index.md index 52284439b34d74..ab4315b6f0ac60 100644 --- a/files/fr/web/css/filter-function/invert/index.md +++ b/files/fr/web/css/filter-function/invert/index.md @@ -42,12 +42,12 @@ invert(100%); /* Négatif de l'image originale */ ## Voir aussi - [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) + - [`blur()`]() + - [`brightness()`]() + - [`contrast()`]() + - [`drop-shadow()`]() + - [`grayscale()`]() + - [`hue-rotate()`]() + - [`opacity()`]() + - [`saturate()`]() + - [`sepia()`]() diff --git a/files/fr/web/css/filter-function/opacity/index.md b/files/fr/web/css/filter-function/opacity/index.md index 5bb7f12b53d59f..fe9884880e6e9e 100644 --- a/files/fr/web/css/filter-function/opacity/index.md +++ b/files/fr/web/css/filter-function/opacity/index.md @@ -45,12 +45,12 @@ opacity(1); /* Aucun effet */ - La propriété CSS [`opacity`](/fr/docs/Web/CSS/opacity) - [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) + - [`blur()`]() + - [`brightness()`]() + - [`contrast()`]() + - [`drop-shadow()`]() + - [`grayscale()`]() + - [`hue-rotate()`]() + - [`invert()`]() + - [`saturate()`]() + - [`sepia()`]() diff --git a/files/fr/web/css/filter-function/saturate/index.md b/files/fr/web/css/filter-function/saturate/index.md index 404d774416457a..2f97729bec3d23 100644 --- a/files/fr/web/css/filter-function/saturate/index.md +++ b/files/fr/web/css/filter-function/saturate/index.md @@ -43,12 +43,12 @@ saturate(200%); /* Saturation doublée */ ## Voir aussi - [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) + - [`blur()`]() + - [`brightness()`]() + - [`contrast()`]() + - [`drop-shadow()`]() + - [`grayscale()`]() + - [`hue-rotate()`]() + - [`invert()`]() + - [`opacity()`]() + - [`sepia()`]() diff --git a/files/fr/web/css/filter-function/sepia/index.md b/files/fr/web/css/filter-function/sepia/index.md index 151e2748c40f04..b50c607671eacc 100644 --- a/files/fr/web/css/filter-function/sepia/index.md +++ b/files/fr/web/css/filter-function/sepia/index.md @@ -42,12 +42,12 @@ sepia(100%); /* Complètement sépia */ ## Voir aussi - [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) + - [`blur()`]() + - [`brightness()`]() + - [`contrast()`]() + - [`drop-shadow()`]() + - [`grayscale()`]() + - [`hue-rotate()`]() + - [`invert()`]() + - [`opacity()`]() + - [`saturate()`]() diff --git a/files/fr/web/css/filter/index.md b/files/fr/web/css/filter/index.md index af839a6ffe96dc..cad81f20052455 100644 --- a/files/fr/web/css/filter/index.md +++ b/files/fr/web/css/filter/index.md @@ -46,18 +46,18 @@ filter: unset; Avec une fonction, on utilisera la forme suivante : ```css -filter: []* | none +filter: [] * | none; ``` En utilisant un élément SVG [``](/fr/docs/Web/SVG/Element/filter), on utilisera la forme suivante : ```css -filter: url(file.svg#filter-element-id) +filter: url(file.svg#filter-element-id); ``` ### Interpolation -Si les deux filtres possèdent chacun une liste de même longueur (sans [``](/fr/docs/Web/CSS/url()), chacune des fonctions est interpolée selon ses propres règles. Si les deux listes ont des longueurs différentes, les derniers filtres de la liste la plus longue sont utilisés avec leurs valeurs par défaut afin de compléter la liste la plus courte, ensuite chaque fonction est interpolée selon ses propres règles. Si un filtre vaut `none`, il est remplacé avec la fonction de filtre (avec ses valeurs par défaut) de l'autre liste puis l'ensemble des fonctions est interpolé selon les règles de chacune. Dans les autres cas, on utilise une interpolation discrète. +Si les deux filtres possèdent chacun une liste de même longueur (sans [``](), chacune des fonctions est interpolée selon ses propres règles. Si les deux listes ont des longueurs différentes, les derniers filtres de la liste la plus longue sont utilisés avec leurs valeurs par défaut afin de compléter la liste la plus courte, ensuite chaque fonction est interpolée selon ses propres règles. Si un filtre vaut `none`, il est remplacé avec la fonction de filtre (avec ses valeurs par défaut) de l'autre liste puis l'ensemble des fonctions est interpolé selon les règles de chacune. Dans les autres cas, on utilise une interpolation discrète. ## Fonctions @@ -70,7 +70,7 @@ Lorsqu'une seule propriété `filter` possède deux fonctions (ou plus), le rés La fonction `url()` prend comme argument l'emplacement d'un [élément SVG <filter> à appliquer](/fr/docs/Web/SVG/Element/filter). L'URL peut faire référence à une ancre d'un élément spécifique. Cet élément peut être embarqué dans un fichier XML externe. ```css -filter: url(resources.svg#c1) +filter: url(resources.svg#c1); ``` ### `blur()` @@ -78,7 +78,7 @@ filter: url(resources.svg#c1) Cette fonction applique un flou gaussien à l'image d'entrée. La valeur du paramètre correspond au rayon de flou (l'écart-type de la gaussienne) utilisé. Plus la valeur est importante, plus le flou sera prononcé. La valeur par défaut du paramètre est 0. Selon la spécification, le paramètre est une valeur de type [``](/fr/docs/Web/CSS/length) mais la fonction n'accepte pas de valeurs exprimées en pourcentages. ```css -filter: blur(5px) +filter: blur(5px); ``` ```html hidden @@ -86,26 +86,54 @@ filter: blur(5px)
      Image originaleExemple live + Exemple live + Équivalent SVG Exemple statique
      + + + +
      - + - + - +
      		+ +
      @@ -113,20 +141,28 @@ filter: blur(5px) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida, Arial, Helvetica, sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; - -webkit-filter:blur(5px); - -ms-filter:blur(5px); - filter:blur(5px); } + width: 100%; + height: auto; + -webkit-filter: blur(5px); + -ms-filter: blur(5px); + filter: blur(5px); +} table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; @@ -147,11 +183,11 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } #img3 { - height:100%; + height: 100%; } ``` @@ -165,14 +201,14 @@ table.standard-table td { {{EmbedLiveSample('','100%','236px','','', 'no-codepen')}} -> **Note :** Voir [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) pour plus d'informations. +> **Note :** Voir [`blur()`]() pour plus d'informations. ### `brightness()` -La fonction [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) permet de modifier la luminosité d'une image grâce à un facteur linéaire. Un argument égal `0%` créera une image totalement noire et une valeur de `100%` conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à `100%` afin d'obtenir des images saturées en luminosité. La valeur par défaut pour l'argument est `1`. +La fonction [`brightness()`]() permet de modifier la luminosité d'une image grâce à un facteur linéaire. Un argument égal `0%` créera une image totalement noire et une valeur de `100%` conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à `100%` afin d'obtenir des images saturées en luminosité. La valeur par défaut pour l'argument est `1`. ```css -filter: brightness(2) +filter: brightness(2); ``` ```svg @@ -219,27 +255,35 @@ filter: brightness(2) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; - -moz-filter:brightness(2); - -webkit-filter:brightness(2); - -ms-filter:brightness(2); - filter:brightness(2); } + width: 100%; + height: auto; + -moz-filter: brightness(2); + -webkit-filter: brightness(2); + -ms-filter: brightness(2); + filter: brightness(2); +} table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; border-spacing: 0px; margin: 0px 0px 1.286em; - height:100%; + height: 100%; width: 85%; } table.standard-table th { @@ -254,24 +298,24 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } #img3 { - height:100%; + height: 100%; } ``` {{EmbedLiveSample('','100%','231px','','', 'no-codepen')}} -> **Note :** Voir [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) pour plus d'informations. +> **Note :** Voir [`brightness()`]() pour plus d'informations. ### `contrast()` -La fonction [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) permet d'ajuster le contraste de l'image d'entrée. Une valeur de `0%` créera une image entièrement grise. Une valeur de `100%` conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à 100% pour augmenter le contraste. La valeur par défaut de l'argument est `1`. +La fonction [`contrast()`]() permet d'ajuster le contraste de l'image d'entrée. Une valeur de `0%` créera une image entièrement grise. Une valeur de `100%` conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à 100% pour augmenter le contraste. La valeur par défaut de l'argument est `1`. ```css -filter: contrast(200%) +filter: contrast(200%); ``` ```svg @@ -318,21 +362,29 @@ filter: contrast(200%) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; - -moz-filter:contrast(200%); - -webkit-filter:contrast(200%); - -ms-filter:contrast(200%); - filter:contrast(200%); } + width: 100%; + height: auto; + -moz-filter: contrast(200%); + -webkit-filter: contrast(200%); + -ms-filter: contrast(200%); + filter: contrast(200%); +} table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; @@ -353,21 +405,21 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } #img3 { - height:100%; + height: 100%; } ``` {{EmbedLiveSample('','100%','203px','','', 'no-codepen')}} -> **Note :** Voir [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) pour plus d'informations. +> **Note :** Voir [`contrast()`]() pour plus d'informations. ### `drop-shadow()` -La fonction [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) permet d'appliquer une ombre portée à l'image d'entrée. Une ombre portée est une version décalée, dans une couleur donnée, du canal alpha de l'image qui est affiché sous celle-ci. La fonction peut accepter une valeur de type [``](/fr/docs/Web/CSS/shadow) (définie dans la spécification CSS3 sur les arrière-plans), une exception : les mots-clés `inset` et `spread` ne sont pas autorisés. Cette fonction est semblable à la propriété [`box-shadow`](/fr/docs/Web/CSS/box-shadow) plus répandue ; seule différence : les navigateurs utilisent parfois l'accélération matérielle pour les filtres ce qui peut permettre d'obtenir de meilleures performances. Les paramètres de l'argument `` sont les suivants : +La fonction [`drop-shadow()`]() permet d'appliquer une ombre portée à l'image d'entrée. Une ombre portée est une version décalée, dans une couleur donnée, du canal alpha de l'image qui est affiché sous celle-ci. La fonction peut accepter une valeur de type [``](/fr/docs/Web/CSS/shadow) (définie dans la spécification CSS3 sur les arrière-plans), une exception : les mots-clés `inset` et `spread` ne sont pas autorisés. Cette fonction est semblable à la propriété [`box-shadow`](/fr/docs/Web/CSS/box-shadow) plus répandue ; seule différence : les navigateurs utilisent parfois l'accélération matérielle pour les filtres ce qui peut permettre d'obtenir de meilleures performances. Les paramètres de l'argument `` sont les suivants : - `` `` (nécessaire) - : Deux valeurs [``](/fr/docs/Web/CSS/length) qui indiquent le décalage de l'ombre portée. `` définit la distance horizontale : des valeurs négatives décaleront l'ombre à gauche de l'élément. `` définit la distance verticale : des valeurs négatives décaleront l'ombre au-dessus de l'élément. Se référer à la page [``](/fr/docs/Web/CSS/length) pour les différentes unités utilisables. @@ -380,7 +432,7 @@ La fonction [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) pe - : Voir [``](/fr/docs/Web/CSS/color_value) pour les mots-clés et notations possibles. Si ce paramètre n'est pas défini, la couleur choisie dépendra du navigateur. Pour Gecko (Firefox), Presto (Opera) et Trident (Internet Explorer), la valeur de la propriété [`color`](/fr/docs/Web/CSS/color) est utilisée. Pour WebKit, si la couleur est absente, l'ombre sera transparente (donc inutile). ```css -filter: drop-shadow(16px 16px 10px black) +filter: drop-shadow(16px 16px 10px black); ``` ```svg @@ -458,29 +510,36 @@ filter: drop-shadow(16px 16px 10px black) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; + width: 100%; + height: auto; -moz-filter: drop-shadow(16px 16px 10px black); -webkit-filter: drop-shadow(16px 16px 10px black); -ms-filter: drop-shadow(16px 16px 10px black); filter: drop-shadow(16px 16px 10px black); } #img12 { - width:100%; - height:auto; - -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); - filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + width: 100%; + height: auto; + -moz-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8)); + -webkit-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8)); + -ms-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8)); + filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8)); } table.standard-table { border: 1px solid rgb(187, 187, 187); @@ -505,25 +564,26 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } -#img3, #img13 { - width:100%; - height:auto; +#img3, +#img13 { + width: 100%; + height: auto; } ``` {{EmbedLiveSample('','100%','400px','','', 'no-codepen')}} -> **Note :** Voir [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) pour plus d'informations. +> **Note :** Voir [`drop-shadow()`]() pour plus d'informations. ### `grayscale()` -Avec la fonction [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()), l'image d'entrée est convertie en niveau de gris. La valeur de l'argument définit la force de cette conversion. En utilisant une valeur de `100%` sera complètement en niveaux de gris. `0%` conservera l'image telle quelle. La valeur par défaut du paramètre est `0`. +Avec la fonction [`grayscale()`](), l'image d'entrée est convertie en niveau de gris. La valeur de l'argument définit la force de cette conversion. En utilisant une valeur de `100%` sera complètement en niveaux de gris. `0%` conservera l'image telle quelle. La valeur par défaut du paramètre est `0`. ```css -filter: grayscale(100%) +filter: grayscale(100%); ``` ```html hidden @@ -558,21 +618,29 @@ filter: grayscale(100%) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; - -moz-filter:grayscale(100%); - -webkit-filter:grayscale(100%); - -ms-filter:grayscale(100%); - filter:grayscale(100%); } + width: 100%; + height: auto; + -moz-filter: grayscale(100%); + -webkit-filter: grayscale(100%); + -ms-filter: grayscale(100%); + filter: grayscale(100%); +} table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; @@ -593,28 +661,28 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } #img3 { - height:100%; + height: 100%; } ``` {{EmbedLiveSample('','100%','209px','','', 'no-codepen')}} -> **Note :** Voir [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) pour plus d'informations. +> **Note :** Voir [`grayscale()`]() pour plus d'informations. ### `hue-rotate()` -La fonction [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) applique une rotation de teinte à l'image d'entrée. La valeur de l'angle passé en argument définit le nombre de degrés parcouru sur le cercle des couleurs. Une valeur de `0deg` conservera l'image telle quelle. La valeur par défaut du paramètre est `0deg`. Il n'y a pas de valeur maximale pour l'argument, si une valeur supérieure à `360deg` est utilisée, ce sera la mesure de l'angle correspondante qui sera utilisée. +La fonction [`hue-rotate()`]() applique une rotation de teinte à l'image d'entrée. La valeur de l'angle passé en argument définit le nombre de degrés parcouru sur le cercle des couleurs. Une valeur de `0deg` conservera l'image telle quelle. La valeur par défaut du paramètre est `0deg`. Il n'y a pas de valeur maximale pour l'argument, si une valeur supérieure à `360deg` est utilisée, ce sera la mesure de l'angle correspondante qui sera utilisée. ```css -filter: hue-rotate(90deg) +filter: hue-rotate(90deg); ``` ```css -filter: hue-rotate(90deg) +filter: hue-rotate(90deg); ``` ```html hidden @@ -646,21 +714,29 @@ filter: hue-rotate(90deg) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; - -moz-filter:hue-rotate(90deg); - -webkit-filter:hue-rotate(90deg); - -ms-filter:hue-rotate(90deg); - filter:hue-rotate(90deg); } + width: 100%; + height: auto; + -moz-filter: hue-rotate(90deg); + -webkit-filter: hue-rotate(90deg); + -ms-filter: hue-rotate(90deg); + filter: hue-rotate(90deg); +} table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; @@ -681,32 +757,34 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } #img3 { - height:100%; + height: 100%; } ``` ```html - + - + ``` {{EmbedLiveSample('','100%','221px','','', 'no-codepen')}} -> **Note :** Voir [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) pour plus d'informations. +> **Note :** Voir [`hue-rotate()`]() pour plus d'informations. ### `invert()` -La fonction [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) permet d'inverser les couleurs de l'image d'entrée. La valeur de l'argument définit la force de cette inversion. Une valeur de `100%` inversera complètement les couleurs (tel un négatif) et une valeur `0%` conservera l'image d'entrée telle quelle. La valeur par défaut de l'argument est `0`. +La fonction [`invert()`]() permet d'inverser les couleurs de l'image d'entrée. La valeur de l'argument définit la force de cette inversion. Une valeur de `100%` inversera complètement les couleurs (tel un négatif) et une valeur `0%` conservera l'image d'entrée telle quelle. La valeur par défaut de l'argument est `0`. ```css -filter: invert(100%) +filter: invert(100%); ``` ```html hidden @@ -741,21 +819,29 @@ filter: invert(100%) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; + width: 100%; + height: auto; -moz-filter: invert(100%); -webkit-filter: invert(100%); -ms-filter: invert(100%); - filter: invert(100%); } + filter: invert(100%); +} table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; @@ -776,24 +862,24 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } #img3 { - height:100%; + height: 100%; } ``` {{EmbedLiveSample('','100%','407px','','', 'no-codepen')}} -> **Note :** Voir [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) pour plus d'informations. +> **Note :** Voir [`invert()`]() pour plus d'informations. ### `opacity()` -La fonction [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) permet de régler l'opacité de l'image d'entrée. La valeur de l'argument indique la force de l'opacité. Ainsi, une valeur de `0%` rendra l'image complètement transparente et une valeur de `100%` conservera l'image telle quelle. Les valeurs intermédiaires appliqueront des effets proportionnels. La valeur par défaut de l'argument est `1`. Cette fonction est proche de la propriété [`opacity`](/fr/docs/Web/CSS/opacity), toutefois, avec les filtres, certains navigateurs utilisent l'accélération matérielle, ce qui permet d'obtenir de meilleures performances. +La fonction [`opacity()`]() permet de régler l'opacité de l'image d'entrée. La valeur de l'argument indique la force de l'opacité. Ainsi, une valeur de `0%` rendra l'image complètement transparente et une valeur de `100%` conservera l'image telle quelle. Les valeurs intermédiaires appliqueront des effets proportionnels. La valeur par défaut de l'argument est `1`. Cette fonction est proche de la propriété [`opacity`](/fr/docs/Web/CSS/opacity), toutefois, avec les filtres, certains navigateurs utilisent l'accélération matérielle, ce qui permet d'obtenir de meilleures performances. ```css -filter: opacity(50%) +filter: opacity(50%); ``` ```html hidden @@ -826,21 +912,29 @@ filter: opacity(50%) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; + width: 100%; + height: auto; -moz-filter: opacity(50%); -webkit-filter: opacity(50%); -ms-filter: opacity(50%); - filter: opacity(50%); } + filter: opacity(50%); +} table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; @@ -861,24 +955,24 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } #img3 { - height:100%; + height: 100%; } ``` {{EmbedLiveSample('','100%','210px','','', 'no-codepen')}} -> **Note :** Voir [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) pour plus d'informations. +> **Note :** Voir [`opacity()`]() pour plus d'informations. ### `saturate()` -La fonction [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) sature l'image d'entrée. La valeur de l'argument indique la force de la saturation. Une valeur de `0%` fera que l'image sera totalement désaturée et une valeur de `100%` conservera l'image d'entrée telle quelle. Les valeurs intermédiaires auront un effet linéaire. Il est possible d'utiliser des valeurs supérieures à `100%` pour obtenir un effet de sursaturation. La valeur par défaut de l'argument est `1`. +La fonction [`saturate()`]() sature l'image d'entrée. La valeur de l'argument indique la force de la saturation. Une valeur de `0%` fera que l'image sera totalement désaturée et une valeur de `100%` conservera l'image d'entrée telle quelle. Les valeurs intermédiaires auront un effet linéaire. Il est possible d'utiliser des valeurs supérieures à `100%` pour obtenir un effet de sursaturation. La valeur par défaut de l'argument est `1`. ```css -filter: saturate(200%) +filter: saturate(200%); ``` ```html hidden @@ -910,21 +1004,29 @@ filter: saturate(200%) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; + width: 100%; + height: auto; -moz-filter: saturate(200%); -webkit-filter: saturate(200%); -ms-filter: saturate(200%); - filter: saturate(200%); } + filter: saturate(200%); +} table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; @@ -945,24 +1047,24 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } #img3 { - height:100%; + height: 100%; } ``` {{EmbedLiveSample('','100%','332px','','', 'no-codepen')}} -> **Note :** Voir [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) pour plus d'informations. +> **Note :** Voir [`saturate()`]() pour plus d'informations. ### `sepia()` -La fonction [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) convertit l'image d'entrée est convertie en sépia. La valeur de l'argument définit la proportion de la conversion. Ainsi, si on utilise un argument égal à 100%, le résultat sera entièrement sépia et si on utilise une valeur de `0%`, l'image d'entrée sera inchangée. Les valeurs comprises entre `0%` et `100%` appliquent l'effet de façon linéaire. La valeur par défaut de l'argument est `0`. +La fonction [`sepia()`]() convertit l'image d'entrée est convertie en sépia. La valeur de l'argument définit la proportion de la conversion. Ainsi, si on utilise un argument égal à 100%, le résultat sera entièrement sépia et si on utilise une valeur de `0%`, l'image d'entrée sera inchangée. Les valeurs comprises entre `0%` et `100%` appliquent l'effet de façon linéaire. La valeur par défaut de l'argument est `0`. ```css -filter: sepia(100%) +filter: sepia(100%); ``` ```html hidden @@ -997,21 +1099,29 @@ filter: sepia(100%) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; + width: 100%; + height: auto; -moz-filter: sepia(100%); -webkit-filter: sepia(100%); -ms-filter: sepia(100%); - filter: sepia(100%); } + filter: sepia(100%); +} table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; @@ -1032,24 +1142,24 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } #img3 { - height:100%; + height: 100%; } ``` {{EmbedLiveSample('','100%','229px','','', 'no-codepen')}} -> **Note :** Voir [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) pour plus d'informations. +> **Note :** Voir [`sepia()`]() pour plus d'informations. ## Enchaîner les fonctions On peut appliquer autant de fonction que nécessaire pour manipuler le rendu obtenu. Dans l'exemple suivant, on augmente le contraste et la luminosité de l'image : ```css -filter: contrast(175%) brightness(103%) +filter: contrast(175%) brightness(103%); ``` ```html hidden @@ -1057,15 +1167,35 @@ filter: contrast(175%) brightness(103%)
      Image originale - Exemple
      live + + Exemple live + Exemple statique - - - + + + + + + + + + @@ -1073,17 +1203,24 @@ filter: contrast(175%) brightness(103%) ```css hidden html { - height:100%; + height: 100%; } body { - font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + font: + 14px/1.286 "Lucida Grande", + "Lucida Sans Unicode", + "DejaVu Sans", + Lucida, + Arial, + Helvetica, + sans-serif; color: rgb(51, 51, 51); - height:100%; - overflow:hidden; + height: 100%; + overflow: hidden; } #img2 { - width:100%; - height:auto; + width: 100%; + height: auto; -moz-filter: contrast(175%) brightness(103%); -webkit-filter: contrast(175%) brightness(103%); -ms-filter: contrast(175%) brightness(103%); @@ -1109,11 +1246,11 @@ table.standard-table td { border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; - width:25%; - height:auto; + width: 25%; + height: auto; } #img3 { - height:100%; + height: 100%; } ``` diff --git a/files/fr/web/css/fit-content/index.md b/files/fr/web/css/fit-content/index.md index 05c45f4e328d98..5e2ef54b758397 100644 --- a/files/fr/web/css/fit-content/index.md +++ b/files/fr/web/css/fit-content/index.md @@ -64,8 +64,8 @@ Elle peut également être utilisée pour définir la taille d'une boîte avec {
      Item as wide as the content.
      - Item with more text in it. Because the contents of it are - wider than the maximum width, it is clamped at 300 pixels. + Item with more text in it. Because the contents of it are wider than the + maximum width, it is clamped at 300 pixels.
      Flexible item
      diff --git a/files/fr/web/css/flex-basis/index.md b/files/fr/web/css/flex-basis/index.md index e992bba0385bad..a0d204215b0cec 100644 --- a/files/fr/web/css/flex-basis/index.md +++ b/files/fr/web/css/flex-basis/index.md @@ -94,10 +94,10 @@ La propriété `flex-basis` est définie grâce au mot-clé [`content`](#content } .flex { - background: #6AB6D8; + background: #6ab6d8; padding: 10px; margin-bottom: 50px; - border: 3px solid #2E86BB; + border: 3px solid #2e86bb; color: white; font-size: 20px; text-align: center; @@ -120,7 +120,7 @@ La propriété `flex-basis` est définie grâce au mot-clé [`content`](#content } .flex1:after { - content: 'auto'; + content: "auto"; } .flex2 { @@ -128,7 +128,7 @@ La propriété `flex-basis` est définie grâce au mot-clé [`content`](#content } .flex2:after { - content: 'max-content'; + content: "max-content"; } .flex3 { @@ -136,7 +136,7 @@ La propriété `flex-basis` est définie grâce au mot-clé [`content`](#content } .flex3:after { - content: 'min-content'; + content: "min-content"; } .flex4 { @@ -144,15 +144,15 @@ La propriété `flex-basis` est définie grâce au mot-clé [`content`](#content } .flex4:after { - content: 'fit-content'; + content: "fit-content"; } .flex5 { - flex-basis: content; + flex-basis: content; } .flex5:after { - content: 'content'; + content: "content"; } .flex6 { @@ -160,7 +160,7 @@ La propriété `flex-basis` est définie grâce au mot-clé [`content`](#content } .flex6:after { - content: 'fill'; + content: "fill"; } ``` diff --git a/files/fr/web/css/flex-direction/index.md b/files/fr/web/css/flex-direction/index.md index 099dcc02b942d9..e453ae76814f15 100644 --- a/files/fr/web/css/flex-direction/index.md +++ b/files/fr/web/css/flex-direction/index.md @@ -64,15 +64,15 @@ flex-direction: unset; ```html

      Un exemple avec column-reverse

      -
      A
      -
      B
      -
      C
      +
      A
      +
      B
      +
      C

      Un exemple avec row-reverse

      -
      A
      -
      B
      -
      C
      +
      A
      +
      B
      +
      C
      ``` diff --git a/files/fr/web/css/flex-flow/index.md b/files/fr/web/css/flex-flow/index.md index 6a2158e4a4f851..36d989d66daccd 100644 --- a/files/fr/web/css/flex-flow/index.md +++ b/files/fr/web/css/flex-flow/index.md @@ -53,14 +53,12 @@ Voir {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}} pour plus d'infor ```css element { - /* L'axe principal sera la direction de bloc */ /* et on commencera par le bas (main-start et */ /* main-end inversés. Les éléments flexibles */ /* passent sur une nouvelle ligne si besoin */ flex-flow: column-reverse wrap; - } ``` diff --git a/files/fr/web/css/flex-grow/index.md b/files/fr/web/css/flex-grow/index.md index c1691967e48295..73cd56c564d3b0 100644 --- a/files/fr/web/css/flex-grow/index.md +++ b/files/fr/web/css/flex-grow/index.md @@ -74,12 +74,12 @@ La propriété `flex-grow` se définit avec une valeur de type [``](#num .box { flex-shrink: 1; - border: 3px solid rgba(0,0,0,.2); + border: 3px solid rgba(0, 0, 0, 0.2); } .box1 { flex-grow: 1; - border: 3px solid rgba(0,0,0,.2); + border: 3px solid rgba(0, 0, 0, 0.2); } ``` diff --git a/files/fr/web/css/flex-shrink/index.md b/files/fr/web/css/flex-shrink/index.md index 6167ac9f116b79..849092adee7332 100644 --- a/files/fr/web/css/flex-shrink/index.md +++ b/files/fr/web/css/flex-shrink/index.md @@ -68,7 +68,7 @@ La propriété `flex-shrink` est définie grâce à une valeur de type [`Un exemple de flex-wrap:wrap +

      Un exemple de flex-wrap:wrap

      1
      2
      3
      -

      Un exemple de flex-wrap:nowrap

      +

      Un exemple de flex-wrap:nowrap

      1
      2
      3
      -

      Un exemple de flex-wrap:wrap-reverse

      +

      Un exemple de flex-wrap:wrap-reverse

      1
      2
      diff --git a/files/fr/web/css/flex/index.md b/files/fr/web/css/flex/index.md index 75985477439d1e..71d31eabb7e950 100644 --- a/files/fr/web/css/flex/index.md +++ b/files/fr/web/css/flex/index.md @@ -20,43 +20,33 @@ Pour la plupart des cas, on utilisera une des valeurs suivantes : `auto`, `initi ```html hidden
      - -
      auto
      -
      auto
      -
      auto
      - +
      auto
      +
      auto
      +
      auto
      - -
      auto
      -
      initial
      -
      initial
      - +
      auto
      +
      initial
      +
      initial
      - -
      auto
      -
      auto
      -
      none
      - +
      auto
      +
      auto
      +
      none
      - -
      initial
      -
      none
      -
      none
      - +
      initial
      +
      none
      +
      none
      - -
      4
      -
      2
      -
      1
      - +
      4
      +
      2
      +
      1
      ``` @@ -66,11 +56,11 @@ Pour la plupart des cas, on utilisera une des valeurs suivantes : `auto`, `initi } .flex-container { - background-color: #F4F7F8; - resize: horizontal; - overflow: hidden; - display: flex; - margin: 1em; + background-color: #f4f7f8; + resize: horizontal; + overflow: hidden; + display: flex; + margin: 1em; } .item { @@ -78,7 +68,7 @@ Pour la plupart des cas, on utilisera une des valeurs suivantes : `auto`, `initi padding: 0.5em; width: 110px; min-width: 0; - background-color: #1B5385; + background-color: #1b5385; color: white; font-family: monospace; } @@ -217,8 +207,10 @@ La propriété `flex` peut être définie avec une, deux ou trois valeurs. ```html
      -
      Boîte flexible (cliquez pour basculer l’affichage de la boîte « normale »)
      -
      Boîte « normale »
      +
      + Boîte flexible (cliquez pour basculer l’affichage de la boîte « normale ») +
      +
      Boîte « normale »
      ``` @@ -227,7 +219,7 @@ La propriété `flex` peut être définie avec une, deux ou trois valeurs. ```js var flex = document.getElementById("flex"); var raw = document.getElementById("raw"); -flex.addEventListener("click", function() { +flex.addEventListener("click", function () { raw.style.display = raw.style.display == "none" ? "block" : "none"; }); ``` diff --git a/files/fr/web/css/font-family/index.md b/files/fr/web/css/font-family/index.md index 91d8ca6877bb45..e70fbe31468741 100644 --- a/files/fr/web/css/font-family/index.md +++ b/files/fr/web/css/font-family/index.md @@ -49,7 +49,9 @@ La propriété `font-family` permet de lister différentes familles de police, s Dans l'exemple suivant, on liste deux familles de police, la première utilise une valeur `` et la seconde utilise une valeur `` : ```css -font-family: Gill Sans Extrabold, sans-serif; +font-family: + Gill Sans Extrabold, + sans-serif; ``` ### Valeurs @@ -98,13 +100,21 @@ font-family: "Goudy Bookletter 1911", sans-serif; Et ces déclarations sont **invalides** : ```css example-bad -font-family: Goudy Bookletter 1911, sans-serif; +font-family: + Goudy Bookletter 1911, + sans-serif; font-family: Red/Black, sans-serif; -font-family: "Lucida" Grande, sans-serif; +font-family: + "Lucida" Grande, + sans-serif; font-family: Ahem!, sans-serif; -font-family: test@foo, sans-serif; +font-family: + test @foo, + sans-serif; font-family: #POUND, sans-serif; -font-family: Hawaii 5-0, sans-serif; +font-family: + Hawaii 5-0, + sans-serif; ``` ## Définition formelle @@ -157,36 +167,26 @@ font-family: Hawaii 5-0, sans-serif; ```html
      -Voici un exemple de police avec empattement (serif). + Voici un exemple de police avec empattement (serif).
      -Voici un exemple de police sans empattement (sans-serif). + Voici un exemple de police sans empattement (sans-serif).
      -Voici un exemple de police à chasse fixe (monospace). + Voici un exemple de police à chasse fixe (monospace).
      -
      -Voici un exemple de police cursive. -
      +
      Voici un exemple de police cursive.
      -
      -Voici un exemple de police fantaisie. -
      +
      Voici un exemple de police fantaisie.
      -
      -Voici un exemple de police mathématique. -
      +
      Voici un exemple de police mathématique.
      -
      -Voici un exemple de police emoji. -
      +
      Voici un exemple de police emoji.
      -
      -Voici un exemple de police fangsong. -
      +
      Voici un exemple de police fangsong.
      ``` ### Résultat diff --git a/files/fr/web/css/font-feature-settings/index.md b/files/fr/web/css/font-feature-settings/index.md index a53f0c999d16a5..b2678a3d316478 100644 --- a/files/fr/web/css/font-feature-settings/index.md +++ b/files/fr/web/css/font-feature-settings/index.md @@ -24,7 +24,9 @@ font-feature-settings: normal; font-feature-settings: "smcp"; font-feature-settings: "smcp" on; font-feature-settings: "swsh" 2; -font-feature-settings: "smcp", "swsh" 2; +font-feature-settings: + "smcp", + "swsh" 2; /* Valeurs globales */ font-feature-settings: inherit; @@ -52,30 +54,46 @@ font-feature-settings: unset; ```css /* on utilise les glyphes alternatifs en small-cap */ -.smallcaps { font-feature-settings: "smcp" on; } +.smallcaps { + font-feature-settings: "smcp" on; +} /* on convertit les majuscules et minuscules en petites capitales */ -.allsmallcaps { font-feature-settings: "c2sc", "smcp"; } +.allsmallcaps { + font-feature-settings: "c2sc", "smcp"; +} /* on utilise les zéros barrés d'une barre oblique afin de les différencier de "O" */ -.nicezero { font-feature-settings: "zero"; } +.nicezero { + font-feature-settings: "zero"; +} /* on active les formes historiques */ -.hist { font-feature-settings: "hist"; } +.hist { + font-feature-settings: "hist"; +} /* on désactive les ligatures communément utilisées */ -.noligs { font-feature-settings: "liga" 0; } +.noligs { + font-feature-settings: "liga" 0; +} /* on active les chiffres tabulaires (chasse fixe) */ -td.tabular { font-feature-settings: "tnum"; } +td.tabular { + font-feature-settings: "tnum"; +} /* on active les fractions automatiques */ -.fractions { font-feature-settings: "frac"; } +.fractions { + font-feature-settings: "frac"; +} /* on utilise le deuxième caractère de « swash » */ -.swash { font-feature-settings: "swsh" 2; } +.swash { + font-feature-settings: "swsh" 2; +} /* On active l'ensemble stylistique 7 */ .fancystyle { diff --git a/files/fr/web/css/font-kerning/index.md b/files/fr/web/css/font-kerning/index.md index 339221caf7d080..f8e66411bbd0f6 100644 --- a/files/fr/web/css/font-kerning/index.md +++ b/files/fr/web/css/font-kerning/index.md @@ -6,7 +6,7 @@ translation_of: Web/CSS/font-kerning {{CSSRef}} -La propriété **`font-kerning`** contrôle le crénage de la police ; c'est-à-dire l'espace créé entre les lettres. L'information de crénage est stockée dans la police et si la police est *bien crénée*, cette caractéristique permet aux caractères, quels qu'ils soient, d'être espacés de manière semblable.![Exemple pour font-kerning](font-kerning.png) +La propriété **`font-kerning`** contrôle le crénage de la police ; c'est-à-dire l'espace créé entre les lettres. L'information de crénage est stockée dans la police et si la police est _bien crénée_, cette caractéristique permet aux caractères, quels qu'ils soient, d'être espacés de manière semblable.![Exemple pour font-kerning](font-kerning.png) ```css font-kerning: auto; @@ -43,7 +43,8 @@ font-kerning: unset; ### CSS ```css -#nokern, #kern { +#nokern, +#kern { font-size: 2rem; font-family: serif; } @@ -66,10 +67,10 @@ font-kerning: unset; ### JavaScript ```js -var input = document.getElementById('input'), - kern = document.getElementById('kern'), - nokern = document.getElementById('nokern'); -input.addEventListener('keyup', function() { +var input = document.getElementById("input"), + kern = document.getElementById("kern"), + nokern = document.getElementById("nokern"); +input.addEventListener("keyup", function () { kern.textContent = input.value; /* On met à jour le contenu */ nokern.textContent = input.value; }); diff --git a/files/fr/web/css/font-language-override/index.md b/files/fr/web/css/font-language-override/index.md index 19fc16af3e8610..ec33400d1e9bfe 100644 --- a/files/fr/web/css/font-language-override/index.md +++ b/files/fr/web/css/font-language-override/index.md @@ -13,8 +13,8 @@ La propriété **`font-language-override`** permet de contrôler l'utilisation d font-language-override: normal; /* values */ -font-language-override: "ENG"; /* Use English glyphs */ -font-language-override: "TRK"; /* Use Turkish glyphs */ +font-language-override: "ENG"; /* Use English glyphs */ +font-language-override: "TRK"; /* Use Turkish glyphs */ /* Valeurs globales */ font-language-override: initial; font-language-override: inherit; @@ -63,7 +63,7 @@ p.para2 { ```html

      Réglage par défaut.

      - Un paragraphe pour lequel font-language-override + Un paragraphe pour lequel font-language-override cible le danois

      ``` diff --git a/files/fr/web/css/font-optical-sizing/index.md b/files/fr/web/css/font-optical-sizing/index.md index a7b2a45a48e9b2..1c32f60370385a 100644 --- a/files/fr/web/css/font-optical-sizing/index.md +++ b/files/fr/web/css/font-optical-sizing/index.md @@ -46,9 +46,9 @@ font-optical-sizing: unset; ```css @font-face { - src: url('AmstelvarAlpha-VF.ttf'); - font-family:'Amstelvar'; - font-style: normal; + src: url("AmstelvarAlpha-VF.ttf"); + font-family: "Amstelvar"; + font-style: normal; } p { @@ -64,12 +64,16 @@ p { ### HTML ```html -

      Ce paragraphe est dimensionné pour une meilleure - lecture. C'est le comportement par défaut.

      - -

      Ce paragraphe n'est pas adapté pour une - meilleure lecture. Vous devriez voir une différence avec les navigateurs - qui prennent en charge cette fonctionnalité.

      +

      + Ce paragraphe est dimensionné pour une meilleure lecture. C'est le + comportement par défaut. +

      + +

      + Ce paragraphe n'est pas adapté pour une meilleure lecture. Vous devriez voir + une différence avec les navigateurs qui prennent en charge cette + fonctionnalité. +

      ``` > **Note :** La police utilisée dans cet exemple possède un dimensionnement optique et est disponible sous licence libre [en téléchargement sur GitHub](https://github.com/TypeNetwork/Amstelvar/releases). diff --git a/files/fr/web/css/font-size-adjust/index.md b/files/fr/web/css/font-size-adjust/index.md index 9811019ba0798f..8c2cf508cc23f3 100644 --- a/files/fr/web/css/font-size-adjust/index.md +++ b/files/fr/web/css/font-size-adjust/index.md @@ -66,21 +66,14 @@ On indique en fait que les minuscules de la fonte utilisée doivent mesurer `7px ```html

      Exemples pour font-size-adjust

      -

      - Voici la fonte Times sur 10 px, - difficile à lire en petit. -

      +

      Voici la fonte Times sur 10 px, difficile à lire en petit.

      - Voici la fonte Verdana sur 10px, - plus lisible car sans empattement - (serif). + Voici la fonte Verdana sur 10px, plus lisible car sans empattement (serif).

      - et voilà le texte ajusté pour - avoir le même facteur de forme - qu'avec Verdana. + et voilà le texte ajusté pour avoir le même facteur de forme qu'avec Verdana.

      ``` diff --git a/files/fr/web/css/font-size/index.md b/files/fr/web/css/font-size/index.md index e4f5bb5af0eca9..507909a360ce29 100644 --- a/files/fr/web/css/font-size/index.md +++ b/files/fr/web/css/font-size/index.md @@ -99,7 +99,7 @@ Un autre aspect important est la **composition** des valeurs exprimées avec cet
      Extérieur - Intérieur + Intérieur Extérieur
      @@ -142,7 +142,7 @@ On utilisera le même fragment de HTML : ```html Extérieur - Intérieur + Intérieur Extérieur ``` @@ -158,15 +158,21 @@ Dans cet exemple, si la taille par défaut du navigateur vaut `16px`, tous les m ```css /* Le paragraphe sera écrit avec une grande */ /* fonte. */ -p { font-size: xx-large } +p { + font-size: xx-large; +} /* La taille du texte des h1 sera 2.5 fois plus */ /* grande que le texte autour. */ -h1 { font-size: 250% } +h1 { + font-size: 250%; +} /* Le texte contenu dans des éléments span */ /* mesurera 16px */ -span { font-size: 16px; } +span { + font-size: 16px; +} ``` ### Démonstration diff --git a/files/fr/web/css/font-style/index.md b/files/fr/web/css/font-style/index.md index a9019268f02415..b5c0330ffe59d2 100644 --- a/files/fr/web/css/font-style/index.md +++ b/files/fr/web/css/font-style/index.md @@ -40,6 +40,7 @@ La propriété `font-style` s'utilise avec un mot-clé parmi ceux qui suivent. S - `oblique` - : Sélectionne une police qualifiée d'`oblique`. S'il n'y a pas de version oblique, une version `italic` sera sélectionnée à la place. Si aucune version n'est disponible, le style de police est synthétisé. - `oblique` [``](/fr/docs/Web/CSS/angle) + - : Sélectionne une police qualifiée d'`oblique` et indique l'angle à utiliser pour la pente du texte. Si plusieurs fontes sont disponibles pour la police, c'est la fonte avec la pente la plus proche qui est utilisée. Si aucune police oblique n'est disponible, le navigateur _synthétisera_ une police penchée en tournant les caractères d'une fonte normale. L'angle indiqué (cf. [``](/fr/docs/Web/CSS/angle)) doit être compris entre `-90deg` et `90deg`. Si aucun angle n'est indiqué, la valeur par défaut utilisée sera `14deg`. Les valeurs positives correspondent à une pente où le haut des caractères penche vers la fin de la ligne et les valeurs négatives permettent d'obtenir une pente orientée vers le début de la ligne. diff --git a/files/fr/web/css/font-synthesis/index.md b/files/fr/web/css/font-synthesis/index.md index 82701f2557d23e..9957343c0645fb 100644 --- a/files/fr/web/css/font-synthesis/index.md +++ b/files/fr/web/css/font-synthesis/index.md @@ -58,7 +58,9 @@ Cette propriété peut prendre l'une des formes suivantes : ### CSS ```css -.syn {font-synthesis: none;} +.syn { + font-synthesis: none; +} ``` ### Résultat diff --git a/files/fr/web/css/font-variant-alternates/index.md b/files/fr/web/css/font-variant-alternates/index.md index e052d83fdc40c5..8db349fbcfaca0 100644 --- a/files/fr/web/css/font-variant-alternates/index.md +++ b/files/fr/web/css/font-variant-alternates/index.md @@ -54,7 +54,8 @@ Cette propriété peut être définie selon deux formes : - `swash()` - : Cette fonction active l'affichage des glyphes [pour les lettres ornées](https://fr.wikipedia.org/wiki/Lettre_ornée). Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond aux valeurs OpenType `swsh` et `cswh` (par exemple `swsh 2` ou `cswh 2`). - `ornaments()` - - : Cette fonction active l'affichage des ornements tels que les [fleurons](https://fr.wikipedia.org/wiki/Fleuron_(typographie)) et autres casseaux. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType `ornm` (par exemple `ornm 2`). + + - : Cette fonction active l'affichage des ornements tels que les [fleurons]() et autres casseaux. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType `ornm` (par exemple `ornm 2`). > **Note :** Afin de préserver la sémantique de la fonte, les fondeurs sont invités à ne pas créer de casseaux qui correspondent aux caractères Unicode déjà définis comme variantes d'ornement pour la puce (`U+2022`). De nombreuses fontes passent outre cette règle et perdent ainsi en qualité. @@ -84,7 +85,9 @@ Cette propriété peut être définie selon deux formes : ```css @font-feature-values "Leitura Display Swashes" { - @swash { fancy: 1 } + @swash { + fancy: 1; + } } p { diff --git a/files/fr/web/css/font-variant-caps/index.md b/files/fr/web/css/font-variant-caps/index.md index 74eb39c01f9c01..d49bbb87c43349 100644 --- a/files/fr/web/css/font-variant-caps/index.md +++ b/files/fr/web/css/font-variant-caps/index.md @@ -81,11 +81,9 @@ La valeur de cette propriété peut être l'un des mots-clés définis ci-après ```html

      - La Reine devint pourpre de colère et - après l’avoir considérée un moment avec - des yeux flamboyants comme ceux d’une - bête fauve, elle se mit à crier : - « Qu’on lui coupe la tête ! » + La Reine devint pourpre de colère et après l’avoir considérée un moment avec + des yeux flamboyants comme ceux d’une bête fauve, elle se mit à crier : « + Qu’on lui coupe la tête ! »

      ``` diff --git a/files/fr/web/css/font-variant-east-asian/index.md b/files/fr/web/css/font-variant-east-asian/index.md index 0e13461e57ab20..3f93f5da8b7988 100644 --- a/files/fr/web/css/font-variant-east-asian/index.md +++ b/files/fr/web/css/font-variant-east-asian/index.md @@ -11,13 +11,13 @@ La propriété **`font-variant-east-asian`** contrôle l'utilisation des glyphes ```css font-variant-east-asian: normal; font-variant-east-asian: ruby; -font-variant-east-asian: jis78; /* */ -font-variant-east-asian: jis83; /* */ -font-variant-east-asian: jis90; /* */ -font-variant-east-asian: jis04; /* */ -font-variant-east-asian: simplified; /* */ -font-variant-east-asian: traditional; /* */ -font-variant-east-asian: full-width; /* */ +font-variant-east-asian: jis78; /* */ +font-variant-east-asian: jis83; /* */ +font-variant-east-asian: jis90; /* */ +font-variant-east-asian: jis04; /* */ +font-variant-east-asian: simplified; /* */ +font-variant-east-asian: traditional; /* */ +font-variant-east-asian: full-width; /* */ font-variant-east-asian: proportional-width; /* */ font-variant-east-asian: ruby full-width jis83; diff --git a/files/fr/web/css/font-variant-ligatures/index.md b/files/fr/web/css/font-variant-ligatures/index.md index bfc4b011946d4e..fc9e8f5e7656fd 100644 --- a/files/fr/web/css/font-variant-ligatures/index.md +++ b/files/fr/web/css/font-variant-ligatures/index.md @@ -16,15 +16,15 @@ La propriété CSS **`font-variant-ligatures`** contrôle quelles [ligatures](/f /* Valeur avec un mot-clé */ font-variant-ligatures: normal; font-variant-ligatures: none; -font-variant-ligatures: common-ligatures; /* */ -font-variant-ligatures: no-common-ligatures; /* */ -font-variant-ligatures: discretionary-ligatures; /* */ +font-variant-ligatures: common-ligatures; /* */ +font-variant-ligatures: no-common-ligatures; /* */ +font-variant-ligatures: discretionary-ligatures; /* */ font-variant-ligatures: no-discretionary-ligatures; /* */ -font-variant-ligatures: historical-ligatures; /* */ -font-variant-ligatures: no-historical-ligatures; /* */ -font-variant-ligatures: contextual; /* */ -font-variant-ligatures: no-contextual; /* */ -font-variant-ligatures: contextual; /* */ +font-variant-ligatures: historical-ligatures; /* */ +font-variant-ligatures: no-historical-ligatures; /* */ +font-variant-ligatures: contextual; /* */ +font-variant-ligatures: no-contextual; /* */ +font-variant-ligatures: contextual; /* */ /* Valeurs globales */ font-variant-ligatures: inherit; @@ -39,24 +39,29 @@ La valeur de cette propriété peut être l'un des mots-clés définis ci-après ### Valeurs - `normal` + - : Cette valeur active les ligatures et les formes contextuelles courantes pour un rendu correct. Les ligatures et formes activées dépendent de la police utilisée, de la langue et de certains scripts. C'est la valeur par défaut. - `none` + - : Cette valeur désactive toutes les ligatures et formes contextuelles, y compris celles couramment utilisées. - `` + - : Ces valeurs contrôlent les ligatures les plus courantes, comme `fi`, `ffi`, `th` et autres. Elles correspondent aux valeurs OpenType `liga` et `clig`. Deux valeurs sont possibles : - `common-ligatures` : active ces ligatures. Notez que la valeur `normal` active ces ligatures. - `no-common-ligatures` : désactive ces ligatures. - `` + - : Ces valeurs contrôlent les ligatures spécifiques, spécifiques à la police et définies par le fondeur. Elles correspondent à la valeur OpenType `dlig`. Deux valeurs sont possibles : - `discretionary-ligatures` : active ces ligatures. - `no-discretionary-ligatures` : désactive ces ligatures. Notez que la valeur `normal` désactive ces ligatures. - `` + - : Ces valeurs contrôlent les ligatures historiques, utilisées dans les livres anciens, comme l'allemand tz qui devient ꜩ. Elles correspondent à la valeur OpenType `hlig`. Deux valeurs sont possibles : - `historical-ligatures` : active ces ligatures. - `no-historical-ligatures` : désactive ces ligatures. Notez que la valeur `normal` désactive ces ligatures. @@ -83,49 +88,49 @@ La valeur de cette propriété peut être l'un des mots-clés définis ci-après #### HTML ```html - +

      - normal
      + normal
      if fi ff tf ft jf fj

      - none
      + none
      if fi ff tf ft jf fj

      - common-ligatures
      + common-ligatures
      if fi ff tf ft jf fj

      - no-common-ligatures
      + no-common-ligatures
      if fi ff tf ft jf fj

      - discretionary-ligatures
      + discretionary-ligatures
      if fi ff tf ft jf fj

      - no-discretionary-ligatures
      + no-discretionary-ligatures
      if fi ff tf ft jf fj

      - historical-ligatures
      + historical-ligatures
      if fi ff tf ft jf fj

      - no-historical-ligatures
      + no-historical-ligatures
      if fi ff tf ft jf fj

      - contextual
      + contextual
      if fi ff tf ft jf fj

      - no-contextual
      + no-contextual
      if fi ff tf ft jf fj

      - contextual
      + contextual
      if fi ff tf ft jf fj

      ``` diff --git a/files/fr/web/css/font-variant-numeric/index.md b/files/fr/web/css/font-variant-numeric/index.md index d2e07b048a97f2..2a6be4fe3163bb 100644 --- a/files/fr/web/css/font-variant-numeric/index.md +++ b/files/fr/web/css/font-variant-numeric/index.md @@ -16,12 +16,12 @@ La propriété [CSS](/fr/docs/Web/CSS) **`font-variant-numeric`** permet de cont font-variant-numeric: normal; font-variant-numeric: ordinal; font-variant-numeric: slashed-zero; -font-variant-numeric: lining-nums; /* */ -font-variant-numeric: oldstyle-nums; /* */ -font-variant-numeric: proportional-nums; /* */ -font-variant-numeric: tabular-nums; /* */ -font-variant-numeric: diagonal-fractions; /* */ -font-variant-numeric: stacked-fractions; /* */ +font-variant-numeric: lining-nums; /* */ +font-variant-numeric: oldstyle-nums; /* */ +font-variant-numeric: proportional-nums; /* */ +font-variant-numeric: tabular-nums; /* */ +font-variant-numeric: diagonal-fractions; /* */ +font-variant-numeric: stacked-fractions; /* */ font-variant-numeric: oldstyle-nums stacked-fractions; /* Valeurs globales */ diff --git a/files/fr/web/css/font-variant-position/index.md b/files/fr/web/css/font-variant-position/index.md index 97f81bc3d2ba9e..75761bdb93e03e 100644 --- a/files/fr/web/css/font-variant-position/index.md +++ b/files/fr/web/css/font-variant-position/index.md @@ -60,10 +60,11 @@ La valeur de cette propriété est définie grâce à l'un des mots-clés défin ### HTML ```html -

      Alice ne s’était pas fait le moindre mal. - Vite elle se remet sur ses pieds et regarde en l’air ; mais tout - est noir là-haut. Elle voit devant elle un long passage et le Lapin - Blanc qui court à toutes jambes. +

      + Alice ne s’était pas fait le moindre mal. + Vite elle se remet sur ses pieds et regarde en l’air ; mais tout est noir + là-haut. Elle voit devant elle un long passage et le Lapin Blanc qui court à + toutes jambes.

      ``` diff --git a/files/fr/web/css/font-weight/index.md b/files/fr/web/css/font-weight/index.md index 4724a027829c4f..7d36fed0812d99 100644 --- a/files/fr/web/css/font-weight/index.md +++ b/files/fr/web/css/font-weight/index.md @@ -181,14 +181,14 @@ Pour les personnes ayant une vision faible, il peut être extrêmement difficile ```html

      - Alice was beginning to get very tired of sitting by her sister on the - bank, and of having nothing to do: once or twice she had peeped into the - book her sister was reading, but it had no pictures or conversations in - it, "and what is the use of a book," thought Alice "without pictures or - conversations?" + Alice was beginning to get very tired of sitting by her sister on the bank, + and of having nothing to do: once or twice she had peeped into the book her + sister was reading, but it had no pictures or conversations in it, "and what + is the use of a book," thought Alice "without pictures or conversations?"

      -
      I'm heavy
      +
      + I'm heavy
      I'm lighter
      ``` @@ -204,7 +204,7 @@ p { /* Le texte du div utilise plus fort que normal mais moins fort que standard. */ div { - font-weight: 600; + font-weight: 600; } /* Le texte du span utilise un niveau de graisse diff --git a/files/fr/web/css/font/index.md b/files/fr/web/css/font/index.md index da577e7e1ae47a..3c453d363ea81c 100644 --- a/files/fr/web/css/font/index.md +++ b/files/fr/web/css/font/index.md @@ -19,10 +19,14 @@ Comme pour les autres propriétés CSS, les valeurs qui ne sont pas définies av ```css /* size | family */ -font: 2em "Open Sans", sans-serif; +font: + 2em "Open Sans", + sans-serif; /* style | size | family */ -font: italic 2em "Open Sans", sans-serif; +font: + italic 2em "Open Sans", + sans-serif; /* style | variant | weight | size/line-height | family */ font: italic small-caps bolder 16px/3 cursive; @@ -176,29 +180,25 @@ Si `font` est définie comme une propriété raccourcie : ```html

      - « Toujours aussi mouillée, » dit Alice tristement. - « Je ne sèche que d’ennui. » + « Toujours aussi mouillée, » dit Alice tristement. « Je ne sèche que d’ennui. + »

      - « Dans ce cas, » dit le Dodo avec emphase, se - dressant sur ses pattes, « je propose l’ajournement, - et l’adoption immédiate de mesures énergiques. » + « Dans ce cas, » dit le Dodo avec emphase, se dressant sur ses pattes, « je + propose l’ajournement, et l’adoption immédiate de mesures énergiques. »

      - « Parlez français, » dit l’Aiglon ; « je ne - comprends pas la moitié de ces grands mots, et, qui - plus est, je ne crois pas que vous les compreniez - vous-même. » L’Aiglon baissa la tête pour cacher - un sourire, et quelques-uns des autres oiseaux - ricanèrent tout haut. + « Parlez français, » dit l’Aiglon ; « je ne comprends pas la moitié de ces + grands mots, et, qui plus est, je ne crois pas que vous les compreniez + vous-même. » L’Aiglon baissa la tête pour cacher un sourire, et quelques-uns + des autres oiseaux ricanèrent tout haut.

      - « J’allais proposer, » dit le Dodo d’un ton vexé, - « une course cocasse ; c’est ce que nous pouvons - faire de mieux pour nous sécher. » + « J’allais proposer, » dit le Dodo d’un ton vexé, « une course cocasse ; c’est + ce que nous pouvons faire de mieux pour nous sécher. »

      ``` diff --git a/files/fr/web/css/gap/index.md b/files/fr/web/css/gap/index.md index 0dc02611bddb18..9fc8b04d3f969c 100644 --- a/files/fr/web/css/gap/index.md +++ b/files/fr/web/css/gap/index.md @@ -99,7 +99,6 @@ Cette propriété est définie avec une valeur `<'row-gap'>`, éventuellement su flex: 1 1 auto; width: 100px; height: 50px; - } ``` @@ -157,9 +156,9 @@ Cette propriété est définie avec une valeur `<'row-gap'>`, éventuellement su ```html

      - Voici un texte en multi-colonne sur des colonnes avec - une gouttière de 40px créée grâce à la propriété - CSS gap. Est-ce que c'est pas trop génial ? + Voici un texte en multi-colonne sur des colonnes avec une gouttière de 40px + créée grâce à la propriété CSS gap. Est-ce que c'est pas trop + génial ?

      ``` diff --git a/files/fr/web/css/gradient/conic-gradient/index.md b/files/fr/web/css/gradient/conic-gradient/index.md index 7f82f295e33d27..8e97a3d90ef0fc 100644 --- a/files/fr/web/css/gradient/conic-gradient/index.md +++ b/files/fr/web/css/gradient/conic-gradient/index.md @@ -137,8 +137,7 @@ div { ```css div { - background-image: - conic-gradient(from 40deg, #fff, #000); + background-image: conic-gradient(from 40deg, #fff, #000); } ``` @@ -182,9 +181,8 @@ div { ```css div { - background: conic-gradient( - red 36deg, orange 36deg 170deg, yellow 170deg); - border-radius: 50% + background: conic-gradient(red 36deg, orange 36deg 170deg, yellow 170deg); + border-radius: 50%; } ``` @@ -205,9 +203,12 @@ div { ```css div { - background: - conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) - top left / 25% 25% repeat; + background: conic-gradient( + #fff 0.25turn, + #000 0.25turn 0.5turn, + #fff 0.5turn 0.75turn, + #000 0.75turn + ) top left / 25% 25% repeat; border: 1px solid; } ``` diff --git a/files/fr/web/css/gradient/index.md b/files/fr/web/css/gradient/index.md index d827e0d9bfcc79..385ff4800940ae 100644 --- a/files/fr/web/css/gradient/index.md +++ b/files/fr/web/css/gradient/index.md @@ -24,11 +24,56 @@ A rainbow made from a gradient ```css body { - background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); - background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); - background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); - background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); - background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet); + background: -moz-linear-gradient( + left, + red, + orange, + yellow, + green, + blue, + indigo, + violet + ); + background: -webkit-linear-gradient( + left, + red, + orange, + yellow, + green, + blue, + indigo, + violet + ); + background: -ms-linear-gradient( + left, + red, + orange, + yellow, + green, + blue, + indigo, + violet + ); + background: -o-linear-gradient( + left, + red, + orange, + yellow, + green, + blue, + indigo, + violet + ); + background: linear-gradient( + to right, + red, + orange, + yellow, + green, + blue, + indigo, + violet + ); } ``` @@ -40,12 +85,12 @@ Ils sont générés à partir de la fonction {{cssxref("radial-gradient", "radia ```html hidden Radial gradient - ``` ```css body { - background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent; + background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll + 0% 0% transparent; background: radial-gradient(red, yellow, rgb(30, 144, 255)); } ``` @@ -62,8 +107,20 @@ Repeating gradient ```css body { - background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px); - background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px); + background: -moz-repeating-linear-gradient( + top left -45deg, + red, + red 5px, + white 5px, + white 10px + ); + background: repeating-linear-gradient( + to top left, + red, + red 5px, + white 5px, + white 10px + ); } ``` diff --git a/files/fr/web/css/gradient/linear-gradient/index.md b/files/fr/web/css/gradient/linear-gradient/index.md index b810717e823f05..15b0091f50147e 100644 --- a/files/fr/web/css/gradient/linear-gradient/index.md +++ b/files/fr/web/css/gradient/linear-gradient/index.md @@ -62,7 +62,7 @@ linear-gradient(45deg, red 0 50%, blue 50% 100%); Comme tout autre dégradé, un dégradé linéaire [ne possède pas de dimensions intrinsèques](/fr/docs/Web/CSS/image#description) ; c'est-à-dire qu'il n'a pas de taille naturelle ou préférée ni de ratio d'affichage préféré. Sa taille réelle correspondra à celle de l'élément auquel il s'applique. -Pour créer un dégradé linéaire qui se répète jusqu'à remplir son conteneur, on utilisera plutôt la fonction [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()). +Pour créer un dégradé linéaire qui se répète jusqu'à remplir son conteneur, on utilisera plutôt la fonction [`repeating-linear-gradient()`](). Étant donné que le type `` est un sous-type du type ``, on peut utiliser des dégradés à tout endroit où on peut utiliser une image. C'est également pour cette raison que `linear-gradient()` ne fonctionnera pas pour la propriété [`background-color`](/fr/docs/Web/CSS/background-color) et pour les autres propriétés qui utilisent le type de données [``](/fr/docs/Web/CSS/color). @@ -158,8 +158,14 @@ body { ```css body { - background: linear-gradient(to right, - red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); + background: linear-gradient( + to right, + red 20%, + orange 20% 40%, + yellow 40% 60%, + green 60% 80%, + blue 80% + ); } ``` @@ -181,13 +187,13 @@ Voir la page [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS - [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients) - Les autres fonctions de dégradés : - - [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()) - - [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient()) - - [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) - - [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient()) - - [`repeating-conic-gradient()`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient()) + - [`repeating-linear-gradient()`]() + - [`radial-gradient()`]() + - [`repeating-radial-gradient()`]() + - [`conic-gradient()`]() + - [`repeating-conic-gradient()`]() - [``](/fr/docs/Web/CSS/image) -- [`element()`](/fr/docs/Web/CSS/element()) -- [`image()`](/fr/docs/Web/CSS/image/image()) -- [`image-set()`](/fr/docs/Web/CSS/image/image-set()) -- [`cross-fade()`](/fr/docs/Web/CSS/cross-fade()) +- [`element()`]() +- [`image()`]() +- [`image-set()`]() +- [`cross-fade()`]() diff --git a/files/fr/web/css/gradient/radial-gradient/index.md b/files/fr/web/css/gradient/radial-gradient/index.md index 915b029946f1c9..90844bb54cb5b6 100644 --- a/files/fr/web/css/gradient/radial-gradient/index.md +++ b/files/fr/web/css/gradient/radial-gradient/index.md @@ -28,20 +28,22 @@ Un dégradé radial est défini en indiquant le centre du dégradé (là où ser - `` - : La forme du contour du dégradé. Elle vaut soit `circle` (la forme du dégradé sera un cercle de rayon constant) ou `ellipse` (la forme est une ellipse alignée sur les axes). La valeur par défaut est `ellipse`. - `` + - : La taille du contour du dégradé. La valeur par défaut est `farthest-corner`. Cette taille peut être définie explicitement ou décrite par un mot-clé. Pour les définitions des mots-clés qui suivent, on considèrera que les bords de la boîte du dégradé s'étendent indéfiniment dans les deux directions (plutôt que d'être finies). Les dégradés circulaires et elliptiques prennent en charge les mots-clés suivants pour `` : - | Mot-clé | Description | - | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | + | Mot-clé | Description | + | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `closest-side` | La forme du contour du dégradé touche le côté de la boîte le plus proche du centre (pour les cercles) ou touche les côtés horizontaux et verticaux les plus proches du centre (pour les ellipses). | - | `closest-corner` | La forme du contour du dégradé est dimensionnée afin de toucher exactement le coin de la boîte le plus proche du centre. | - | `farthest-side` | Cette valeur fonctionne de façon semblable à `closest-side`, sauf que ce seront les côtés les plus éloignés qui seront utilisés. | - | `farthest-corner` | La valeur par défaut. Cette valeur fonctionne de façon semblable à `closest-corner`, sauf que ce sera le coin le plus éloigné du centre qui sera utilisé. | + | `closest-corner` | La forme du contour du dégradé est dimensionnée afin de toucher exactement le coin de la boîte le plus proche du centre. | + | `farthest-side` | Cette valeur fonctionne de façon semblable à `closest-side`, sauf que ce seront les côtés les plus éloignés qui seront utilisés. | + | `farthest-corner` | La valeur par défaut. Cette valeur fonctionne de façon semblable à `closest-corner`, sauf que ce sera le coin le plus éloigné du centre qui sera utilisé. | Si `` est définie avec `circle`, la taille pourra être fournie explicitement avec une valeur [``](/fr/docs/Web/CSS/length), qui indique le rayon du cercle (les valeurs négatives sont invalides). Si `` est définie avec `ellipse` (ou que cette valeur est omise), la taille pourra être indiquée explicitement avec une valeur [``](/fr/docs/Web/CSS/length-percentage) dont les deux composantes fournissent une taille d'ellipse explicite (la première représentant le rayon horizontal et la seconde le rayon vertical). Les valeurs exprimées en pourcentages sont alors relatives à la dimension correspondante de la boîte du dégradé. Les valeurs négatives sont invalides. + - `` - : Une valeur d'arrêt de couleur, composée d'une valeur [``](/fr/docs/Web/CSS/color_value), suivie d'une ou deux positions d'arrêt optionnelles (définies par une valeur [``](/fr/docs/Web/CSS/percentage) ou [``](/fr/docs/Web/CSS/length) le long de l'axe du dégradé). Un pourcentage à `0%`, ou une longueur de `0`, représentera le centre du dégradé ; la valeur `100%` représentera l'intersection de la forme du contour avec la ligne d'évolution du dégradé. Les valeurs de pourcentages intermédiaire sont positionnées linéairement le long du dégradé. Inclure deux fois la même position pour deux arrêts différents revient à créer une rupture franche entre les deux couleurs. - `` @@ -111,8 +113,11 @@ Les arrêts de couleurs sont positionnés selon une ligne virtuelle qui part du ```css .radial-gradient { - background-image: radial-gradient(farthest-corner at 40px 40px, - #f35 0%, #43e 100%); + background-image: radial-gradient( + farthest-corner at 40px 40px, + #f35 0%, + #43e 100% + ); } ``` diff --git a/files/fr/web/css/gradient/repeating-conic-gradient/index.md b/files/fr/web/css/gradient/repeating-conic-gradient/index.md index 858613610d31ef..457a8bc38b4bc5 100644 --- a/files/fr/web/css/gradient/repeating-conic-gradient/index.md +++ b/files/fr/web/css/gradient/repeating-conic-gradient/index.md @@ -17,9 +17,9 @@ La [fonction](/fr/docs/Web/CSS/CSS_Functions) [CSS](/fr/docs/Web/CSS) **`repeati est centré dans le quart supérieur gauche et tourné de 3 degrés, il n'y a donc pas de ligne horizontale */ background: repeating-conic-gradient( - from 3deg at 25% 25%, - hsl(200, 100%, 50%) 0deg 15deg, - hsl(200, 100%, 60%) 10deg 30deg + from 3deg at 25% 25%, + hsl(200, 100%, 50%) 0deg 15deg, + hsl(200, 100%, 60%) 10deg 30deg ); ``` @@ -109,8 +109,7 @@ div { ```css div { - background-image: - repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg); + background-image: repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg); } ``` @@ -133,7 +132,12 @@ div { div { background: repeating-conic-gradient( from 3deg at 25% 25%, - green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg); + green, + blue 2deg 5deg, + green, + yellow 15deg 18deg, + green 20deg + ); } ``` diff --git a/files/fr/web/css/gradient/repeating-linear-gradient/index.md b/files/fr/web/css/gradient/repeating-linear-gradient/index.md index 8e31dc9b86d3c3..d1990bcca34d7b 100644 --- a/files/fr/web/css/gradient/repeating-linear-gradient/index.md +++ b/files/fr/web/css/gradient/repeating-linear-gradient/index.md @@ -72,15 +72,19 @@ body { ```css body { - background-image: repeating-linear-gradient(-45deg, - transparent, - transparent 20px, - black 20px, - black 40px); + background-image: repeating-linear-gradient( + -45deg, + transparent, + transparent 20px, + black 20px, + black 40px + ); /* avec plusieurs arrêts de couleur */ - background-image: repeating-linear-gradient(-45deg, - transparent 0 20px, - black 20px 40px); + background-image: repeating-linear-gradient( + -45deg, + transparent 0 20px, + black 20px 40px + ); } ``` @@ -97,10 +101,12 @@ body { ```css body { - background-image: repeating-linear-gradient(to bottom, - rgb(26,198,204), - rgb(26,198,204) 7%, - rgb(100,100,100) 10%); + background-image: repeating-linear-gradient( + to bottom, + rgb(26, 198, 204), + rgb(26, 198, 204) 7%, + rgb(100, 100, 100) 10% + ); } ``` diff --git a/files/fr/web/css/gradient/repeating-radial-gradient/index.md b/files/fr/web/css/gradient/repeating-radial-gradient/index.md index d241a2d9cb8140..f3b260391a567c 100644 --- a/files/fr/web/css/gradient/repeating-radial-gradient/index.md +++ b/files/fr/web/css/gradient/repeating-radial-gradient/index.md @@ -41,12 +41,12 @@ repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); - : Un mot-clé décrivant la taille de la forme de terminaison. Les valeurs possibles sont : - | Mot-clé | Description | - | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | + | Mot-clé | Description | + | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `closest-side` | La forme du contour du dégradé touche le côté de la boîte le plus proche du centre (pour les cercles) ou touche les côtés horizontaux et verticaux les plus proches du centre (pour les ellipses). | - | `closest-corner` | La forme du contour du dégradé est dimensionnée afin de toucher exactement le coin de la boîte le plus proche du centre. | - | `farthest-side` | Cette valeur fonctionne de façon semblable à `closest-side`, sauf que ce seront les côtés les plus éloignés qui seront utilisés. | - | `farthest-corner` | La valeur par défaut. Cette valeur fonctionne de façon semblable à `closest-corner`, sauf que ce sera le coin le plus éloigné du centre qui sera utilisé. | + | `closest-corner` | La forme du contour du dégradé est dimensionnée afin de toucher exactement le coin de la boîte le plus proche du centre. | + | `farthest-side` | Cette valeur fonctionne de façon semblable à `closest-side`, sauf que ce seront les côtés les plus éloignés qui seront utilisés. | + | `farthest-corner` | La valeur par défaut. Cette valeur fonctionne de façon semblable à `closest-corner`, sauf que ce sera le coin le plus éloigné du centre qui sera utilisé. | > **Note :** Les premières implémentations de cette fonction incluaient d'autres mots-clés (`cover` et `contain`) qui sont des synonymes respectifs des mots-clés standards `farthest-corner` et `closest-side`. Seuls les mots-clés standards doivent être utilisés, certaines implémentations ayant déjà abandonné ces anciennes variantes. @@ -74,7 +74,12 @@ repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); ```css .radial-gradient { - background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); + background: repeating-radial-gradient( + black, + black 5px, + white 5px, + white 10px + ); } ``` @@ -95,10 +100,18 @@ repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); ```css .radial-gradient { - background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, - red, black 5%, blue 5%, green 10%); - background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, - red 0 5%, green 5% 10%); + background: repeating-radial-gradient( + ellipse farthest-corner at 20% 20%, + red, + black 5%, + blue 5%, + green 10% + ); + background: repeating-radial-gradient( + ellipse farthest-corner at 20% 20%, + red 0 5%, + green 5% 10% + ); } ``` diff --git a/files/fr/web/css/grid-auto-flow/index.md b/files/fr/web/css/grid-auto-flow/index.md index f6ed3a9bbaa9c3..08c5b808fb018e 100644 --- a/files/fr/web/css/grid-auto-flow/index.md +++ b/files/fr/web/css/grid-auto-flow/index.md @@ -62,7 +62,7 @@ Cette propriété peut prendre deux formes : display: grid; grid-gap: 10px; grid-template: repeat(4, 1fr) / repeat(2, 1fr); - grid-auto-flow: column; /* ou 'row', 'row dense', 'column dense' */ + grid-auto-flow: column; /* ou 'row', 'row dense', 'column dense' */ } #item1 { @@ -102,7 +102,7 @@ Cette propriété peut prendre deux formes : - + ``` diff --git a/files/fr/web/css/grid-auto-rows/index.md b/files/fr/web/css/grid-auto-rows/index.md index 4d2958bc4b8a64..b5ae5552bcddb3 100644 --- a/files/fr/web/css/grid-auto-rows/index.md +++ b/files/fr/web/css/grid-auto-rows/index.md @@ -48,7 +48,6 @@ grid-auto-rows: 0.5fr 3fr 1fr; grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); - /* Valeurs globales */ grid-auto-rows: inherit; grid-auto-rows: initial; diff --git a/files/fr/web/css/grid-column-end/index.md b/files/fr/web/css/grid-column-end/index.md index 786f1c9c3274f8..98efa4b0558e34 100644 --- a/files/fr/web/css/grid-column-end/index.md +++ b/files/fr/web/css/grid-column-end/index.md @@ -104,7 +104,9 @@ grid-column-end: unset; ``` ```css hidden -* {box-sizing: border-box;} +* { + box-sizing: border-box; +} .wrapper { border: 2px solid #f76707; diff --git a/files/fr/web/css/grid-column-start/index.md b/files/fr/web/css/grid-column-start/index.md index bbae5f3c0c5a7a..19483322d46822 100644 --- a/files/fr/web/css/grid-column-start/index.md +++ b/files/fr/web/css/grid-column-start/index.md @@ -114,7 +114,9 @@ La valeur de cette propriété prend la forme d'une seule valeur ``. ``` ```css hidden -* {box-sizing: border-box;} +* { + box-sizing: border-box; +} .wrapper { border: 2px solid #f76707; diff --git a/files/fr/web/css/grid-row-end/index.md b/files/fr/web/css/grid-row-end/index.md index de6489df66aaba..64d64ce74314a8 100644 --- a/files/fr/web/css/grid-row-end/index.md +++ b/files/fr/web/css/grid-row-end/index.md @@ -104,7 +104,9 @@ grid-row-end: unset; ``` ```css hidden -* {box-sizing: border-box;} +* { + box-sizing: border-box; +} .wrapper { border: 2px solid #f76707; diff --git a/files/fr/web/css/grid-row-start/index.md b/files/fr/web/css/grid-row-start/index.md index 7af9b2fe5f2ef5..6216702eab5739 100644 --- a/files/fr/web/css/grid-row-start/index.md +++ b/files/fr/web/css/grid-row-start/index.md @@ -112,7 +112,9 @@ La valeur de cette propriété prend la forme d'une seule valeur ``. ``` ```css hidden -* {box-sizing: border-box;} +* { + box-sizing: border-box; +} .wrapper { border: 2px solid #f76707; diff --git a/files/fr/web/css/grid-template-areas/index.md b/files/fr/web/css/grid-template-areas/index.md index 28c58295bbffd7..60fc33f940f9bd 100644 --- a/files/fr/web/css/grid-template-areas/index.md +++ b/files/fr/web/css/grid-template-areas/index.md @@ -21,8 +21,9 @@ grid-template-areas: none; /* Valeurs de chaînes */ /* Type */ grid-template-areas: "a b"; -grid-template-areas: "a b b" - "a c d"; +grid-template-areas: + "a b b" + "a c d"; /* Valeurs globales */ grid-template-areas: inherit; @@ -65,9 +66,10 @@ grid-template-areas: unset; display: grid; width: 100%; height: 250px; - grid-template-areas: "head head" - "nav main" - "nav foot"; + grid-template-areas: + "head head" + "nav main" + "nav foot"; grid-template-rows: 50px 1fr 30px; grid-template-columns: 150px 1fr; } diff --git a/files/fr/web/css/grid-template-columns/index.md b/files/fr/web/css/grid-template-columns/index.md index 57818c9d50862b..6f4c7974ed877b 100644 --- a/files/fr/web/css/grid-template-columns/index.md +++ b/files/fr/web/css/grid-template-columns/index.md @@ -26,13 +26,16 @@ grid-template-columns: repeat(3, 200px); /* Valeurs */ grid-template-columns: 200px repeat(auto-fill, 100px) 300px; -grid-template-columns: minmax(100px, max-content) - repeat(auto-fill, 200px) 20%; -grid-template-columns: [linename1] 100px [linename2] - repeat(auto-fit, [linename3 linename4] 300px) - 100px; -grid-template-columns: [linename1 linename2] 100px - repeat(auto-fit, [linename1] 300px) [linename3]; +grid-template-columns: + minmax(100px, max-content) + repeat(auto-fill, 200px) 20%; +grid-template-columns: + [linename1] 100px [linename2] + repeat(auto-fit, [linename3 linename4] 300px) + 100px; +grid-template-columns: + [linename1 linename2] 100px + repeat(auto-fit, [linename1] 300px) [linename3]; /* Valeurs globales */ grid-template-columns: inherit; diff --git a/files/fr/web/css/grid-template-rows/index.md b/files/fr/web/css/grid-template-rows/index.md index e89ccb82e58436..09917d6fa1ed4f 100644 --- a/files/fr/web/css/grid-template-rows/index.md +++ b/files/fr/web/css/grid-template-rows/index.md @@ -27,14 +27,16 @@ grid-template-rows: repeat(3, 200px); /* Valeurs */ grid-template-rows: 200px repeat(auto-fill, 100px) 300px; -grid-template-rows: minmax(100px, max-content) - repeat(auto-fill, 200px) 20%; -grid-template-rows: [linename1] 100px [linename2] - repeat(auto-fit, [linename3 linename4] 300px) - 100px; -grid-template-rows: [linename1 linename2] 100px - repeat(auto-fit, [linename1] 300px) [linename3]; - +grid-template-rows: + minmax(100px, max-content) + repeat(auto-fill, 200px) 20%; +grid-template-rows: + [linename1] 100px [linename2] + repeat(auto-fit, [linename3 linename4] 300px) + 100px; +grid-template-rows: + [linename1 linename2] 100px + repeat(auto-fit, [linename1] 300px) [linename3]; /* Valeurs globales */ grid-template-rows: inherit; diff --git a/files/fr/web/css/grid-template/index.md b/files/fr/web/css/grid-template/index.md index e0e356d243c70e..4c2a4ff51cfed5 100644 --- a/files/fr/web/css/grid-template/index.md +++ b/files/fr/web/css/grid-template/index.md @@ -25,13 +25,16 @@ grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%; grid-template: fit-content(100px) / fit-content(40%); /* Valeurs utilisant grid-template-areas grid-template-rows / grid-template-column */ -grid-template: "a a a" - "b b b"; -grid-template: "a a a" 20% - "b b b" auto; -grid-template: [header-top] "a a a" [header-bottom] - [main-top] "b b b" 1fr [main-bottom] - / auto 1fr auto; +grid-template: + "a a a" + "b b b"; +grid-template: + "a a a" 20% + "b b b" auto; +grid-template: + [header-top] "a a a" [header-bottom] + [main-top] "b b b" 1fr [main-bottom] + / auto 1fr auto; /* Valeurs globales */ grid-template: inherit; @@ -70,10 +73,11 @@ grid-template: unset; display: grid; width: 100%; height: 200px; - grid-template: [header-left] "head head" 30px [header-right] - [main-left] "nav main" 1fr [main-right] - [footer-left] "nav foot" 30px [footer-right] - / 120px 1fr; + grid-template: + [header-left] "head head" 30px [header-right] + [main-left] "nav main" 1fr [main-right] + [footer-left] "nav foot" 30px [footer-right] + / 120px 1fr; } header { diff --git a/files/fr/web/css/hanging-punctuation/index.md b/files/fr/web/css/hanging-punctuation/index.md index 0c7c66f96ab01b..adc2954475a454 100644 --- a/files/fr/web/css/hanging-punctuation/index.md +++ b/files/fr/web/css/hanging-punctuation/index.md @@ -75,14 +75,11 @@ Cette propriété peut être définie grâce à une, deux ou trois valeurs : ```html

      - Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Curabitur dignissim nunc - mauris, et sollicitudin est scelerisque - sed. Praesent laoreet tortor massa, sit - amet vulputate nulla pharetra ut. Proin - ornare commodo sodales. Class aptent - taciti sociosqu ad litora torquent per - conubia nostra, per inceptos himenaeos. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim + nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor + massa, sit amet vulputate nulla pharetra ut. Proin ornare commodo sodales. + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos.

      ``` @@ -91,7 +88,7 @@ Cette propriété peut être définie grâce à une, deux ou trois valeurs : ```css p { hanging-punctuation: first; - margin: .5rem; + margin: 0.5rem; } ``` diff --git a/files/fr/web/css/hyphens/index.md b/files/fr/web/css/hyphens/index.md index b0aa406d5e9903..93d638e28dfb5b 100644 --- a/files/fr/web/css/hyphens/index.md +++ b/files/fr/web/css/hyphens/index.md @@ -66,7 +66,7 @@ Dans cet exemple, on crée trois classes CSS pour illustrer chacune des configur p { width: 55px; border: 1px solid black; - } +} p.none { -webkit-hyphens: none; -ms-hyphens: none; @@ -88,13 +88,17 @@ p.auto { ```html
        -
      • none: aucun trait d'union, dépassement si nécessaire +
      • + none: aucun trait d'union, dépassement si nécessaire

        An extreme­ly long English word

        • -
      • manual: un trait d'union uniquement à &hyphen; ou &shy; (si nécessaire) +
      • + manual: un trait d'union uniquement à &hyphen; ou &shy; + (si nécessaire)

        An extreme­ly long English word

        • -
      • auto: un trait d'union où l'algorithme l'estime nécessaire +
      • + auto: un trait d'union où l'algorithme l'estime nécessaire

        An extreme­ly long English word

      diff --git a/files/fr/web/css/id_selectors/index.md b/files/fr/web/css/id_selectors/index.md index 7ad344b1bdef76..5724672ab79899 100644 --- a/files/fr/web/css/id_selectors/index.md +++ b/files/fr/web/css/id_selectors/index.md @@ -23,7 +23,6 @@ Un sélecteur d'identifiant (_ID selector_) permet, pour un document HTML, de ci > **Note :** Cela est équivalent à la notation suivante qui utilise un {{cssxref("Sélecteurs_d_attribut", "sélecteur d'attribut")}}: > -> > ``` > [id=valeur_identifiant] { déclarations } > ``` diff --git a/files/fr/web/css/image-orientation/index.md b/files/fr/web/css/image-orientation/index.md index f5f8ed7e7f146c..f9a5ec5b2e671b 100644 --- a/files/fr/web/css/image-orientation/index.md +++ b/files/fr/web/css/image-orientation/index.md @@ -61,7 +61,7 @@ L'image suivante a suivi une rotation de 180° et la propriété `image-orientat ```css hidden img { - margin: .5rem 0; + margin: 0.5rem 0; } label { @@ -70,23 +70,29 @@ label { ``` ```html hidden -Orientation obtenue à partir de l'image +Orientation obtenue à partir de l'image
      - +
      - +
      ``` ```js hidden -document.addEventListener('change', evt => { +document.addEventListener("change", (evt) => { document.getElementById("image").style.imageOrientation = evt.target.value; }); ``` diff --git a/files/fr/web/css/image/image-set/index.md b/files/fr/web/css/image/image-set/index.md index de21d035a95cf1..f206f74fa30473 100644 --- a/files/fr/web/css/image/image-set/index.md +++ b/files/fr/web/css/image/image-set/index.md @@ -56,7 +56,8 @@ Il n'y a pas de méthode de recours native en l'absence de prise en charge de `i background-image: url("large-balloons.jpg"); background-image: image-set( "large-balloons.avif" type("image/avif"), - "large-balloons.jpg" type("image/jpeg")); + "large-balloons.jpg" type("image/jpeg") + ); } ``` diff --git a/files/fr/web/css/image/image/index.md b/files/fr/web/css/image/image/index.md index 534d38fa5c1f54..e6e1c04067273d 100644 --- a/files/fr/web/css/image/image/index.md +++ b/files/fr/web/css/image/image/index.md @@ -32,7 +32,7 @@ Le premier paramètre de la fonction `image()` est optionnel et indique la direc Une différence fondamentale entre `url()` et `image()` est la possibilité d'ajouter un identifiant de fragment d'image. Un identifiant de fragment est donné par : un point de départ défini par ses coordonnées x et y et par une largeur et une hauteur. Cela permet de ne sélectionner qu'une section de l'image source. La section ainsi définie devient une image à part entière aux yeux du moteur de rendu. ```css -background-image: image('monimage.webp#xywh=0,20,40,60'); +background-image: image("monimage.webp#xywh=0,20,40,60"); ``` Avec l'exemple précédent, l'image d'arrière-plan utilisée sera une section de l'image `monimage.webp` commençant aux coordonnées (0px,20px), ayant une largeur de 40px et une hauteur de 60px. @@ -75,13 +75,15 @@ Cette fonction peut aider à améliorer l'accessibilité en fournissant une coul ```html
      • La puce est une flèche pointant à droite et située à gauche
        • -
      • La puce est la même flèche mais renversée pour pointer à gauche.
        • +
      • + La puce est la même flèche mais renversée pour pointer à gauche. +
      ``` ```css ul { - list-style-image: image(ltr 'rightarrow.png'); + list-style-image: image(ltr "rightarrow.png"); } ``` @@ -92,7 +94,9 @@ Pour les éléments de la liste allant de gauche à droite (ceux avec `dir="ltr" ### Afficher une section de l'image ```html -
      Vous pouvez survoler cet élément pour voir un autre curseur
      +
      + Vous pouvez survoler cet élément pour voir un autre curseur +
      ``` ```css @@ -108,21 +112,25 @@ Lorsqu'on survole la boîte, le curseur changera pour afficher une section d'un ### Placer une couleur sur une image en arrière-plan ```css hidden -.quarterlogo {height: 200px; width: 200px; border: 1px solid;} +.quarterlogo { + height: 200px; + width: 200px; + border: 1px solid; +} ``` ```css .quarterlogo { - background-image: - image(rgba(0, 0, 0, 0.25)), - url("firefox.png"); + background-image: image(rgba(0, 0, 0, 0.25)), url("firefox.png"); background-size: 25%; background-repeat: no-repeat; } ``` ```html - + ``` Dans l'exemple précédent, on placera un masque noir semi-transparent sur le logo Firefox utilisé comme image d'arrière-plan. Si on avait utilisé la propriété `background-color` à la place, la couleur aurait été placée sous le logo et non sur lui. De plus, le conteneur entier aurait eu cette couleur en arrière-plan. Avec `image()` et [`background-size`](/fr/docs/Web/CSS/background-size) (tout en empêchant l'image de se répéter grâce à [`background-repeat`](/fr/docs/Web/CSS/background-repeat)), le voile noir ne couvrira qu'un quart du conteneur. diff --git a/files/fr/web/css/image/index.md b/files/fr/web/css/image/index.md index fc964be3e16de2..7ed627f9207897 100644 --- a/files/fr/web/css/image/index.md +++ b/files/fr/web/css/image/index.md @@ -35,17 +35,17 @@ Le moteur CSS détermine la _taille effective_ d'un objet en utilisant : 2. Sa taille indiquée, définie par les propriétés CSS telles que [`width`](/fr/docs/Web/CSS/width), [`height`](/fr/docs/Web/CSS/height), ou [`background-size`](/fr/docs/Web/CSS/background-size) 3. Sa taille par défaut, déterminée en fonction de la propriété avec laquelle l'image est utilisée (voir le tableau qui suit) -| Type d'objet (propriété CSS) | Taille par défaut de l'objet | -| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -| [`background-image`](/fr/docs/Web/CSS/background-image) | La taille de la zone de positionnement de l'arrière-plan de l'élément | -| [`list-style-image`](/fr/docs/Web/CSS/list-style-image) | La taille d'un caractère en `1em` | -| [`border-image-source`](/fr/docs/Web/CSS/border-image-source) | La taille de la zone de bordure de l'élément | -| [`cursor`](/fr/docs/Web/CSS/cursor) | La taille définie par le navigateur qui correspond à la taille du curseur du système client | -| [`mask-image`](/fr/docs/Web/CSS/mask-image) | ? | -| [`shape-outside`](/fr/docs/Web/CSS/shape-outside) | ? | -| [`mask-border-source`](/fr/docs/Web/CSS/mask-border-source) | ? | -| [`symbols()`](/fr/docs/Web/CSS/symbols) pour [`@counter-style`](/fr/docs/Web/CSS/@counter-style) | Fonctionnalité à risque. Si prise en charge, la taille est celle du curseur du système client | -| [`content`](/fr/docs/Web/CSS/content) pour un pseudo-élément ([`::after`](/fr/docs/Web/CSS/::after)/[`::before`](/fr/docs/Web/CSS/::before)) | Un rectangle de 300px par 150px | +| Type d'objet (propriété CSS) | Taille par défaut de l'objet | +| -------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | +| [`background-image`](/fr/docs/Web/CSS/background-image) | La taille de la zone de positionnement de l'arrière-plan de l'élément | +| [`list-style-image`](/fr/docs/Web/CSS/list-style-image) | La taille d'un caractère en `1em` | +| [`border-image-source`](/fr/docs/Web/CSS/border-image-source) | La taille de la zone de bordure de l'élément | +| [`cursor`](/fr/docs/Web/CSS/cursor) | La taille définie par le navigateur qui correspond à la taille du curseur du système client | +| [`mask-image`](/fr/docs/Web/CSS/mask-image) | ? | +| [`shape-outside`](/fr/docs/Web/CSS/shape-outside) | ? | +| [`mask-border-source`](/fr/docs/Web/CSS/mask-border-source) | ? | +| [`symbols()`](/fr/docs/Web/CSS/symbols) pour [`@counter-style`](/fr/docs/Web/CSS/@counter-style) | Fonctionnalité à risque. Si prise en charge, la taille est celle du curseur du système client | +| [`content`](/fr/docs/Web/CSS/content) pour un pseudo-élément ([`::after`](/fr/docs/Web/CSS/::after)/[`::before`](/fr/docs/Web/CSS/::before)) | Un rectangle de 300px par 150px | La taille effective d'un objet est calculée avec l'algorithme suivant : diff --git a/files/fr/web/css/image/paint/index.md b/files/fr/web/css/image/paint/index.md index d15dc1b81b3ddc..875efe92e743fc 100644 --- a/files/fr/web/css/image/paint/index.md +++ b/files/fr/web/css/image/paint/index.md @@ -53,22 +53,24 @@ Il est possible de passer des arguments supplémentaires grâce à la fonction C ``` ```js hidden -CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js'); +CSS.paintWorklet.addModule( + "https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js", +); ``` ```css li { - --boxColor: hsla(55, 90%, 60%, 1.0); + --boxColor: hsla(55, 90%, 60%, 1); background-image: paint(hollowHighlights, stroke, 2px); } li:nth-of-type(3n) { - --boxColor: hsla(155, 90%, 60%, 1.0); - background-image: paint(hollowHighlights, filled, 3px); + --boxColor: hsla(155, 90%, 60%, 1); + background-image: paint(hollowHighlights, filled, 3px); } -li:nth-of-type(3n+1) { - --boxColor: hsla(255, 90%, 60%, 1.0); +li:nth-of-type(3n + 1) { + --boxColor: hsla(255, 90%, 60%, 1); background-image: paint(hollowHighlights, stroke, 1px); } ``` diff --git a/files/fr/web/css/index.md b/files/fr/web/css/index.md index a487540ef7a7d3..073d69982f5700 100644 --- a/files/fr/web/css/index.md +++ b/files/fr/web/css/index.md @@ -1,5 +1,5 @@ --- -title: 'CSS : Feuilles de style en cascade' +title: "CSS : Feuilles de style en cascade" slug: Web/CSS translation_of: Web/CSS --- diff --git a/files/fr/web/css/inherit/index.md b/files/fr/web/css/inherit/index.md index d32cd0efb93dcd..c54d8aca408b28 100644 --- a/files/fr/web/css/inherit/index.md +++ b/files/fr/web/css/inherit/index.md @@ -31,12 +31,14 @@ p { ### HTML ```html -

      Alice remarqua, avec quelque surprise, qu’en - tombant sur le plancher les cailloux se changeaient - en petits gâteaux, et une brillante idée lui - traversa l’esprit.

      -

      Elle avala un des gâteaux, et s’aperçut avec - joie qu’elle diminuait rapidement

      +

      + Alice remarqua, avec quelque surprise, qu’en tombant sur le plancher les + cailloux se changeaient en petits gâteaux, et une brillante idée lui traversa + l’esprit. +

      +

      + Elle avala un des gâteaux, et s’aperçut avec joie qu’elle diminuait rapidement +

      ``` ### Résultat diff --git a/files/fr/web/css/inheritance/index.md b/files/fr/web/css/inheritance/index.md index 40b2fbe822f2dd..6f3192e79ee376 100644 --- a/files/fr/web/css/inheritance/index.md +++ b/files/fr/web/css/inheritance/index.md @@ -52,7 +52,7 @@ p { {{EmbedLiveSample("")}} -Les mots « du texte en emphase » n'ont pas de bordure *en plus* (car la valeur initiale de [`border-style`](/fr/docs/Web/CSS/border-style) est `none`). +Les mots « du texte en emphase » n'ont pas de bordure _en plus_ (car la valeur initiale de [`border-style`](/fr/docs/Web/CSS/border-style) est `none`). ## Notes diff --git a/files/fr/web/css/initial-letter-align/index.md b/files/fr/web/css/initial-letter-align/index.md index ee5dd505daae49..3574b81c51274e 100644 --- a/files/fr/web/css/initial-letter-align/index.md +++ b/files/fr/web/css/initial-letter-align/index.md @@ -65,12 +65,11 @@ La valeur de cette propriété peut être l'un des mots-clés parmi ceux défini ```html

      - Tombe, tombe, tombe ! « Cette chute n’en finira - donc pas ! Je suis curieuse de savoir combien de - milles j’ai déjà faits, » dit-elle tout haut. « Je - dois être bien près du centre de la terre. Voyons - donc, cela serait à quatre mille milles de profondeur, - il me semble. »

      + Tombe, tombe, tombe ! « Cette chute n’en finira donc pas ! Je + suis curieuse de savoir combien de milles j’ai déjà faits, » dit-elle + tout haut. « Je dois être bien près du centre de la terre. Voyons donc, + cela serait à quatre mille milles de profondeur, il me semble. » +

      ``` ### Résultat diff --git a/files/fr/web/css/initial-letter/index.md b/files/fr/web/css/initial-letter/index.md index 984337fc238b00..3b5280e7e8e72d 100644 --- a/files/fr/web/css/initial-letter/index.md +++ b/files/fr/web/css/initial-letter/index.md @@ -14,9 +14,9 @@ initial-letter: normal; /* Valeurs numériques */ /* Types puis */ -initial-letter: 1.5; /* La première lettre occupe 1.5 lignes */ -initial-letter: 3.0; /* La première lettre occupe 3 lignes */ -initial-letter: 3.0 2; /* La première lettre occupe 3 lignes et +initial-letter: 1.5; /* La première lettre occupe 1.5 lignes */ +initial-letter: 3; /* La première lettre occupe 3 lignes */ +initial-letter: 3 2; /* La première lettre occupe 3 lignes et s'enfonce de deux lignes vers le bas */ /* Valeurs globales */ @@ -52,8 +52,8 @@ La valeur de cette propriété peut être le mot-clé `normal` ou un nombre (` - Un grand rosier se trouvait à l’entrée du jardin ; - les roses qu’il portait étaient blanches, mais trois - jardiniers étaient en train de les peindre en rouge. + Un grand rosier se trouvait à l’entrée du jardin ; les roses qu’il + portait étaient blanches, mais trois jardiniers étaient en train de les + peindre en rouge.

      ``` diff --git a/files/fr/web/css/initial/index.md b/files/fr/web/css/initial/index.md index 7b20284f3766bf..75fab83aee1990 100644 --- a/files/fr/web/css/initial/index.md +++ b/files/fr/web/css/initial/index.md @@ -33,13 +33,11 @@ La propriété {{cssxref("all")}} peut être utilisée avec cette valeur afin de ### HTML ```html -

      - Texte rouge - - ce texte est avec la couleur initiale (noire) - - ce texte est rouge aussi -

      +

      + Texte rouge + ce texte est avec la couleur initiale (noire) + ce texte est rouge aussi +

      ``` ### Résultat diff --git a/files/fr/web/css/isolation/index.md b/files/fr/web/css/isolation/index.md index dbb7499c237eea..ad7236e02454e5 100644 --- a/files/fr/web/css/isolation/index.md +++ b/files/fr/web/css/isolation/index.md @@ -48,7 +48,7 @@ La propriété `isolation` est définie avec l'un des mots-clés suivants. ```css .a { - background-color: rgb(0,255,0); + background-color: rgb(0, 255, 0); } #b { width: 200px; diff --git a/files/fr/web/css/justify-content/index.md b/files/fr/web/css/justify-content/index.md index 64502ffa723d53..93229006a4401c 100644 --- a/files/fr/web/css/justify-content/index.md +++ b/files/fr/web/css/justify-content/index.md @@ -18,13 +18,13 @@ L'alignement est appliqué après que les longueurs et les marges automatiques o ```css /* Alignement « géométrique » */ -justify-content: center; /* Éléments groupés au centre */ -justify-content: start; /* Éléments groupés au début */ -justify-content: end; /* Éléments groupés à la fin */ +justify-content: center; /* Éléments groupés au centre */ +justify-content: start; /* Éléments groupés au début */ +justify-content: end; /* Éléments groupés à la fin */ justify-content: flex-start; /* Éléments flexibles groupés au début */ -justify-content: flex-end; /* Éléments flexibles groupés à la fin */ -justify-content: left; /* Éléments groupés à gauche */ -justify-content: right; /* Éléments groupés à droite */ +justify-content: flex-end; /* Éléments flexibles groupés à la fin */ +justify-content: left; /* Éléments groupés à gauche */ +justify-content: right; /* Éléments groupés à droite */ /* Alignement par rapport à la ligne de base */ /* justify-content ne prend pas de valeurs relatives à la ligne de base */ @@ -37,15 +37,15 @@ justify-content: space-between; /* Les éléments sont répartis équitablement Le bord du premier est aligné sur le début du conteneur et la fin du dernier est alignée sur la fin du conteneur */ -justify-content: space-around; /* Les éléments sont répartis équitablement +justify-content: space-around; /* Les éléments sont répartis équitablement À chaque extrémité, entre le bord du conteneur et le premier/dernier élément on a la moitié de l'espace appliqué entre chaque élément */ -justify-content: space-evenly; /* Les éléments sont répartis équitablement +justify-content: space-evenly; /* Les éléments sont répartis équitablement Tous les éléments sont séparés par le même espace */ -justify-content: stretch; /* Les éléments sont répartis équitablement et +justify-content: stretch; /* Les éléments sont répartis équitablement et les éléments dimensionnés avec 'auto' sont étirés afin de remplir le conteneur */ @@ -146,8 +146,7 @@ justify-content: unset; ```js hidden var justifyContent = document.getElementById("justifyContent"); justifyContent.addEventListener("change", function (evt) { - document.getElementById("container").style.justifyContent = - evt.target.value; + document.getElementById("container").style.justifyContent = evt.target.value; }); ``` diff --git a/files/fr/web/css/justify-items/index.md b/files/fr/web/css/justify-items/index.md index 87f42d3b5ed64f..f5cbe9b5b22fbe 100644 --- a/files/fr/web/css/justify-items/index.md +++ b/files/fr/web/css/justify-items/index.md @@ -27,15 +27,15 @@ justify-items: normal; justify-items: stretch; /* Alignement par rapport à l'axe */ -justify-items: center; /* Les éléments sont regroupés au centre */ -justify-items: start; /* Les éléments sont regroupés au début */ -justify-items: end; /* Les éléments sont regroupés à la fin */ +justify-items: center; /* Les éléments sont regroupés au centre */ +justify-items: start; /* Les éléments sont regroupés au début */ +justify-items: end; /* Les éléments sont regroupés à la fin */ justify-items: flex-start; /* Les éléments sont regroupés au début de l'axe */ -justify-items: flex-end; /* Les éléments sont regroupés à la fin de l'axe */ +justify-items: flex-end; /* Les éléments sont regroupés à la fin de l'axe */ justify-items: self-start; justify-items: self-end; -justify-items: left; /* Les éléments sont regroupés à gauche */ -justify-items: right; /* Les éléments sont regroupés à droite */ +justify-items: left; /* Les éléments sont regroupés à gauche */ +justify-items: right; /* Les éléments sont regroupés à droite */ /* Alignement par rapport à la ligne de base */ justify-items: baseline; @@ -124,7 +124,9 @@ Cette propriété peut être définie selon trois formes différentes : ### CSS ```css hidden -* {box-sizing: border-box;} +* { + box-sizing: border-box; +} .wrapper { border: 2px solid #f76707; @@ -145,7 +147,7 @@ Cette propriété peut être définie selon trois formes différentes : .wrapper { display: grid; grid-template-columns: repeat(3, 100px); - grid-template-rows: repeat(3,100px); + grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; grid-gap: 10px; diff --git a/files/fr/web/css/justify-self/index.md b/files/fr/web/css/justify-self/index.md index a45adcec128069..bd94ef41f438bb 100644 --- a/files/fr/web/css/justify-self/index.md +++ b/files/fr/web/css/justify-self/index.md @@ -25,15 +25,15 @@ justify-self: normal; justify-self: stretch; /* Alignement par rapport à l'axe */ -justify-self: center; /* L'élément est aligné au centre */ -justify-self: start; /* L'élément est aligné au début */ -justify-self: end; /* L'élément est aligné à la fin */ +justify-self: center; /* L'élément est aligné au centre */ +justify-self: start; /* L'élément est aligné au début */ +justify-self: end; /* L'élément est aligné à la fin */ justify-self: flex-start; /* L'élément est aligné au début de l'axe */ -justify-self: flex-end; /* L'élément est aligné à la fin de l'axe */ +justify-self: flex-end; /* L'élément est aligné à la fin de l'axe */ justify-self: self-start; justify-self: self-end; -justify-self: left; /* L'élément est aligné à gauche */ -justify-self: right; /* L'élément est aligné à droite */ +justify-self: left; /* L'élément est aligné à gauche */ +justify-self: right; /* L'élément est aligné à droite */ /* Alignement par rapport à la ligne de base */ justify-self: baseline; @@ -113,7 +113,9 @@ Cette propriété peut être définie selon trois formes différentes : ### CSS ```css hidden -* {box-sizing: border-box;} +* { + box-sizing: border-box; +} .wrapper { border: 2px solid #f76707; @@ -134,7 +136,7 @@ Cette propriété peut être définie selon trois formes différentes : .wrapper { display: grid; grid-template-columns: repeat(2, 100px); - grid-template-rows: repeat(2,100px); + grid-template-rows: repeat(2, 100px); height: 300px; width: 300px; grid-gap: 10px; diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md index 70043faf428948..64c9c1788bcb3c 100644 --- a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md @@ -22,13 +22,13 @@ Une recette se décompose comme suit : 2. Une version téléchargeable de cet exemple, également stockée sur le dépôt des exemples CSS. 3. Une page MDN, rattachée à la section [Livre de recettes CSS](/fr/docs/Web/CSS/Layout_cookbook) qui contient : - 1. Les spécifications sommaires - 2. La recette - 3. Les choix effectués - 4. Les éventuelles méthodes alternatives (utiles pour l'amélioration progressive) - 5. Les points relatifs à l'accessibilité - 6. La compatibilité des navigateurs - 7. D'éventuelles ressources additionnelles + 1. Les spécifications sommaires + 2. La recette + 3. Les choix effectués + 4. Les éventuelles méthodes alternatives (utiles pour l'amélioration progressive) + 5. Les points relatifs à l'accessibilité + 6. La compatibilité des navigateurs + 7. D'éventuelles ressources additionnelles ### 1. Construire le motif diff --git a/files/fr/web/css/layout_cookbook/index.md b/files/fr/web/css/layout_cookbook/index.md index 3d275ea5614b84..f12c6a377d98b8 100644 --- a/files/fr/web/css/layout_cookbook/index.md +++ b/files/fr/web/css/layout_cookbook/index.md @@ -12,18 +12,18 @@ Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fr ## Les recettes -| Recette | Description | Méthodes de disposition utilisées | -| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Objets avec média](/fr/docs/Web/CSS/Layout_cookbook/Media_objects) | Une boîte constituée de deux colonnes avec une image d'un côté et un texte descriptif de l'autre (par exemple un tweet ou une publication Facebook intégrée à une page). | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), {{cssxref("float")}} pour une méthode de recours, dimensionnement avec {{cssxref("fit-content")}} | -| [Colonnes](/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes) | Comment choisir entre une disposition multi-colonnes, les boites flexibles (flexbox) ou les grilles CSS pour organiser des colonnes de contenu. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), [Disposition multi-colonnes](/fr/docs/Web/CSS/CSS_Columns), [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | -| [Centrer un élément](/fr/docs/Web/CSS/Layout_cookbook/Centrer_un_element) | Comment centrer un élément horizontalement et verticalement. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | -| [Bas de page adhérant](/fr/docs/Web/CSS/Layout_cookbook/Bas_de_page_adhérant) | Créer un pied de page qui se situe en bas du conteneur ou de la zone d'affichage (_viewport_) lorsque le contenu est plus petit que la zone ou le conteneur. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | -| [Navigation segmentée](/fr/docs/Web/CSS/Layout_cookbook/Navigation_segmentée) | Un motif de navigation où certains liens sont séparés des autres. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), {{cssxref("margin")}} | -| [Navigation avec un fil d'Ariane (_breadcrumb_)](/fr/docs/Web/CSS/Layout_cookbook/Navigation_Breadcrumb) | Créer une liste de liens qui permette au visiteur de naviguer selon la hiérarchie des pages. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | -| [Liste de groupes avec indicateurs](/fr/docs/Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs) | Afficher une liste d'éléments avec chacun un indicateur numérique. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | -| [Pagination](/fr/docs/Web/CSS/Layout_cookbook/Pagination) | Comment créer des liens pour différentes pages, ordonnées, de contenu (les résultats d'une recherche par exemple). | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | -| [Carte](/fr/docs/Web/CSS/Layout_cookbook/Carte) | Un composant sous forme de carte. L'assemblage de tels composants formera une grille de cartes. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout) | -| [Envelopper une grille (_grid wrapper_)](/fr/docs/Web/CSS/Layout_cookbook/Grid_wrapper) | Comment aligner certains éléments au centre d'une grille et permettre à d'autres d'être alignés sur les bords. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout) | +| Recette | Description | Méthodes de disposition utilisées | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Objets avec média](/fr/docs/Web/CSS/Layout_cookbook/Media_objects) | Une boîte constituée de deux colonnes avec une image d'un côté et un texte descriptif de l'autre (par exemple un tweet ou une publication Facebook intégrée à une page). | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), {{cssxref("float")}} pour une méthode de recours, dimensionnement avec {{cssxref("fit-content")}} | +| [Colonnes](/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes) | Comment choisir entre une disposition multi-colonnes, les boites flexibles (flexbox) ou les grilles CSS pour organiser des colonnes de contenu. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), [Disposition multi-colonnes](/fr/docs/Web/CSS/CSS_Columns), [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | +| [Centrer un élément](/fr/docs/Web/CSS/Layout_cookbook/Centrer_un_element) | Comment centrer un élément horizontalement et verticalement. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | +| [Bas de page adhérant](/fr/docs/Web/CSS/Layout_cookbook/Bas_de_page_adhérant) | Créer un pied de page qui se situe en bas du conteneur ou de la zone d'affichage (_viewport_) lorsque le contenu est plus petit que la zone ou le conteneur. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | +| [Navigation segmentée](/fr/docs/Web/CSS/Layout_cookbook/Navigation_segmentée) | Un motif de navigation où certains liens sont séparés des autres. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), {{cssxref("margin")}} | +| [Navigation avec un fil d'Ariane (_breadcrumb_)](/fr/docs/Web/CSS/Layout_cookbook/Navigation_Breadcrumb) | Créer une liste de liens qui permette au visiteur de naviguer selon la hiérarchie des pages. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | +| [Liste de groupes avec indicateurs](/fr/docs/Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs) | Afficher une liste d'éléments avec chacun un indicateur numérique. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | +| [Pagination](/fr/docs/Web/CSS/Layout_cookbook/Pagination) | Comment créer des liens pour différentes pages, ordonnées, de contenu (les résultats d'une recherche par exemple). | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | +| [Carte](/fr/docs/Web/CSS/Layout_cookbook/Carte) | Un composant sous forme de carte. L'assemblage de tels composants formera une grille de cartes. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout) | +| [Envelopper une grille (_grid wrapper_)](/fr/docs/Web/CSS/Layout_cookbook/Grid_wrapper) | Comment aligner certains éléments au centre d'une grille et permettre à d'autres d'être alignés sur les bords. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout) | ## Contribuer en créant une recette diff --git a/files/fr/web/css/layout_cookbook/pagination/index.md b/files/fr/web/css/layout_cookbook/pagination/index.md index a8cb74a07a51d8..dd892a77070587 100644 --- a/files/fr/web/css/layout_cookbook/pagination/index.md +++ b/files/fr/web/css/layout_cookbook/pagination/index.md @@ -58,7 +58,7 @@ Voir la section « Voir aussi » en fin d'article pour divers liens portants sur - {{Cssxref("justify-content")}} - {{Cssxref("column-gap")}} -- _[Know your ARIA: 'Hidden' vs 'None' (en anglais)](https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html) +- _[Know your ARIA: 'Hidden' vs 'None' (en anglais)](https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html)_ - [Utiliser le contenu invisible pour les lecteurs d'écran (en anglais)](https://webaim.org/techniques/css/invisiblecontent/#techniques) - [Écrire du CSS sans oublier l'accessibilité (en anglais)](https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939) - [Guide stylistique d'accessibilité : la pagination](https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination) diff --git a/files/fr/web/css/left/index.md b/files/fr/web/css/left/index.md index 58717e3b76812b..759c372e21b53a 100644 --- a/files/fr/web/css/left/index.md +++ b/files/fr/web/css/left/index.md @@ -78,7 +78,7 @@ left: unset; #wrap { width: 700px; margin: 0 auto; - background: #5C5C5C; + background: #5c5c5c; } pre { @@ -94,7 +94,7 @@ pre { position: absolute; left: 20px; top: 20px; - background-color: #D8F5FF; + background-color: #d8f5ff; } #exemple_2 { @@ -103,8 +103,7 @@ pre { position: relative; top: 0; right: 0; - background-color: #C1FFDB; - + background-color: #c1ffdb; } #exemple_3 { width: 600px; @@ -112,16 +111,16 @@ pre { position: relative; top: 20px; left: 20px; - background-color: #FFD7C2; + background-color: #ffd7c2; } #exemple_4 { - width:200px; - height:200px; - position:absolute; - bottom:10px; - right:20px; - background-color:#FFC7E4; + width: 200px; + height: 200px; + position: absolute; + bottom: 10px; + right: 20px; + background-color: #ffc7e4; } ``` @@ -135,7 +134,10 @@ pre { left: 20px; top: 20px; -

      Le seul élément englobant pour ce div est la fenêtre principale. Elle se positionne par rapport à elle.

      +

      + Le seul élément englobant pour ce div est la fenêtre principale. Elle se + positionne par rapport à elle. +

      @@ -154,7 +156,10 @@ pre { top: 20px; left: 20px; -

      La position est relative par rapport au div voisin mais on le retire du flux.

      +

      + La position est relative par rapport au div voisin mais on le retire du + flux. + 

      @@ -162,7 +167,10 @@ pre {
         bottom: 10px;
         right: 20px;
      -

      La position est absolue à l'intérieur d'un parent positionné de façon relative.

      +

      + La position est absolue à l'intérieur d'un parent positionné de façon + relative. +

      diff --git a/files/fr/web/css/letter-spacing/index.md b/files/fr/web/css/letter-spacing/index.md index cc97b8cde9a0d0..4348b856da976b 100644 --- a/files/fr/web/css/letter-spacing/index.md +++ b/files/fr/web/css/letter-spacing/index.md @@ -17,7 +17,7 @@ La propriété **`letter-spacing`** définit [l'interlettre](https://fr.wikipedi /* Type */ letter-spacing: 0.3em; letter-spacing: 3px; -letter-spacing: .3px; +letter-spacing: 0.3px; /* Valeur avec mot-clé */ letter-spacing: normal; @@ -48,10 +48,18 @@ letter-spacing: unset; ### CSS ```css -.premier { letter-spacing: 0.4em; } -.deuxieme { letter-spacing: 1em; } -.troisieme { letter-spacing: -0.05em; } -.quatrieme { letter-spacing: 6px; } +.premier { + letter-spacing: 0.4em; +} +.deuxieme { + letter-spacing: 1em; +} +.troisieme { + letter-spacing: -0.05em; +} +.quatrieme { + letter-spacing: 6px; +} ``` ### HTML diff --git a/files/fr/web/css/line-height/index.md b/files/fr/web/css/line-height/index.md index 7af38c18b0b6c4..42e62aefb0be3e 100644 --- a/files/fr/web/css/line-height/index.md +++ b/files/fr/web/css/line-height/index.md @@ -73,10 +73,24 @@ La propriété `line-height` peut être définie grâce : /* Toutes les règles qui suivent fourniront un résultat équivalent */ -div { line-height: 1.2; font-size: 10pt } /* number */ -div { line-height: 1.2em; font-size: 10pt } /* length */ -div { line-height: 120%; font-size: 10pt } /* percentage */ -div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif } +div { + line-height: 1.2; + font-size: 10pt; +} /* number */ +div { + line-height: 1.2em; + font-size: 10pt; +} /* length */ +div { + line-height: 120%; + font-size: 10pt; +} /* percentage */ +div { + font: + 10pt/1.2 Georgia, + "Bitstream Charter", + serif; +} ``` ### Notes @@ -115,12 +129,12 @@ h1 { ```html
      -

      Avoid unexpected results by using unitless line-height

      +

      Avoid unexpected results by using unitless line-height

      length and percentage line-heights have poor inheritance behavior ...
      -

      Avoid unexpected results by using unitless line-height

      +

      Avoid unexpected results by using unitless line-height

      length and percentage line-heights have poor inheritance behavior ...
      diff --git a/files/fr/web/css/list-style-image/index.md b/files/fr/web/css/list-style-image/index.md index 8b81891e69c846..470a2fc35c126a 100644 --- a/files/fr/web/css/list-style-image/index.md +++ b/files/fr/web/css/list-style-image/index.md @@ -21,7 +21,7 @@ On peut également utiliser la propriété raccourcie [`list-style`](/fr/docs/We list-style-image: none; /* Valeurs pointant vers une image */ -list-style-image: url('starsolid.gif'); +list-style-image: url("starsolid.gif"); /* Valeurs avec une image */ list-style-image: linear-gradient(to left bottom, red, blue); @@ -110,4 +110,4 @@ ul { - [`list-style`](/fr/docs/Web/CSS/list-style) - [`list-style-type`](/fr/docs/Web/CSS/list-style-type) - [`list-style-position`](/fr/docs/Web/CSS/list-style-position) -- La fonction [`url()`](/fr/docs/Web/CSS/url()) +- La fonction [`url()`]() diff --git a/files/fr/web/css/list-style-position/index.md b/files/fr/web/css/list-style-position/index.md index d40638398fe530..cedb3872f75cc6 100644 --- a/files/fr/web/css/list-style-position/index.md +++ b/files/fr/web/css/list-style-position/index.md @@ -54,19 +54,22 @@ La propriété `list-style-position` est définie avec l'un des mots-clés suiva #### HTML ```html -
        Liste 1 +
          + Liste 1
        • Élément 1-1
        • Élément 1-2
        • Élément 1-3
        • Élément 1-4
        -
          Liste 2 +
            + Liste 2
          • Élément 2-1
          • Élément 2-2
          • Élément 2-3
          • Élément 2-4
          -
            Liste 3 +
              + Liste 3
            • Élément 3-1
            • Élément 3-2
            • Élément 3-3
              • diff --git a/files/fr/web/css/list-style-type/index.md b/files/fr/web/css/list-style-type/index.md index a9ba6ec21f282f..c98674192e5815 100644 --- a/files/fr/web/css/list-style-type/index.md +++ b/files/fr/web/css/list-style-type/index.md @@ -28,7 +28,7 @@ list-style-type: kannada; /* Une chaîne de caractères */ /* Type */ -list-style-type: '-'; +list-style-type: "-"; /* Un identifiant correspondant à */ /* une règle @counter-style */ @@ -60,7 +60,7 @@ La propriété `list-style-type` peut être définie grâce à : - [``](/fr/docs/Web/CSS/custom-ident) - : Un identifiant correspondant à la valeur d'un [`@counter-style`](/fr/docs/Web/CSS/@counter-style) ou à un style prédéfini : -- [`symbols()`](/fr/docs/Web/CSS/symbols()) +- [`symbols()`]() - : Définit un style de puce utilisé. - [``](/fr/docs/Web/CSS/string) - : La chaîne de caractères indiquée sera utilisée comme puce. @@ -266,267 +266,413 @@ ol.shortcut {

              Choisissez un style de liste :

              - -
              ``` @@ -546,7 +692,7 @@ label { } input { - margin: .4rem; + margin: 0.4rem; } ``` @@ -554,7 +700,7 @@ input { ```js const container = document.querySelector(".container"); -container.addEventListener("change", event => { +container.addEventListener("change", (event) => { const list = document.querySelector("ol"); list.setAttribute("style", `list-style-type: ${event.target.value}`); }); diff --git a/files/fr/web/css/list-style/index.md b/files/fr/web/css/list-style/index.md index 8d7d9fe970b9de..0a19e6cf21f4ed 100644 --- a/files/fr/web/css/list-style/index.md +++ b/files/fr/web/css/list-style/index.md @@ -27,7 +27,7 @@ Cette propriété est une propriété raccourcie pour les propriétés CSS  list-style: square; /* Image */ -list-style: url('../img/etoile.png'); +list-style: url("../img/etoile.png"); /* Position */ list-style: inside; @@ -36,8 +36,7 @@ list-style: inside; list-style: georgian inside; /* type | image | position */ -list-style: lower-roman url('../img/etoile.png') outside; - +list-style: lower-roman url("../img/etoile.png") outside; /* Valeur avec un mot-clé */ list-style: none; @@ -83,13 +82,15 @@ ul li::before { Une autre approche consiste à affecter une valeur `url` à la propriété `list-style` : ```css -nav ol, nav ul { +nav ol, +nav ul { list-style: none; } /* cela devient : */ -nav ol, nav ul { +nav ol, +nav ul { list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"); } ``` diff --git a/files/fr/web/css/margin-block-end/index.md b/files/fr/web/css/margin-block-end/index.md index 7f47aadfdc3486..1abfc1b8c1fb02 100644 --- a/files/fr/web/css/margin-block-end/index.md +++ b/files/fr/web/css/margin-block-end/index.md @@ -15,9 +15,9 @@ La propriété **`margin-block-end`** définit la marge logique appliquée à la ```css /* Valeurs de longueur */ /* Type */ -margin-block-end: 10px; /* Une longueur absolue */ -margin-block-end: 1em; /* Une longueur relative à la taille du texte */ -margin-block-end: 5%; /* Une largeur relative à la +margin-block-end: 10px; /* Une longueur absolue */ +margin-block-end: 1em; /* Une longueur relative à la taille du texte */ +margin-block-end: 5%; /* Une largeur relative à la largeur du bloc englobant */ /* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/margin-block-start/index.md b/files/fr/web/css/margin-block-start/index.md index f692f7e7636800..c076fb970e1eab 100644 --- a/files/fr/web/css/margin-block-start/index.md +++ b/files/fr/web/css/margin-block-start/index.md @@ -17,9 +17,9 @@ Cette propriété est à rapprocher de {{cssxref("margin-inline-start")}}, {{css ```css /* Valeurs de longueur */ /* Type */ -margin-block-start: 10px; /* Une longueur absolue */ -margin-block-start: 1em; /* Une longueur relative à la taille du texte */ -margin-block-start: 5%; /* Une largeur relative à la +margin-block-start: 10px; /* Une longueur absolue */ +margin-block-start: 1em; /* Une longueur relative à la taille du texte */ +margin-block-start: 5%; /* Une largeur relative à la largeur du bloc englobant */ /* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/margin-block/index.md b/files/fr/web/css/margin-block/index.md index ab2d9bc1831164..b211b348071474 100644 --- a/files/fr/web/css/margin-block/index.md +++ b/files/fr/web/css/margin-block/index.md @@ -11,10 +11,10 @@ La propriété **`margin-block`** définit la marge sur les côtés de l'éléme ```css /* Valeurs de longueur */ /* Type */ -margin-block: 10px 20px; /* Une longueur absolue */ -margin-block: 1em 2em; /* Une longueur relative à la taille du texte */ -margin-block: 5% 2%; /* Une longueur relative à la largeur ou hauteur du bloc englobant */ -margin-block: 10px; /* Une valeur utilisée pour les deux côtés */ +margin-block: 10px 20px; /* Une longueur absolue */ +margin-block: 1em 2em; /* Une longueur relative à la taille du texte */ +margin-block: 5% 2%; /* Une longueur relative à la largeur ou hauteur du bloc englobant */ +margin-block: 10px; /* Une valeur utilisée pour les deux côtés */ /* Valeurs avec un mot-clé */ margin-block: auto; diff --git a/files/fr/web/css/margin-bottom/index.md b/files/fr/web/css/margin-bottom/index.md index 22d725db9ba6fc..df0b0359ee21e7 100644 --- a/files/fr/web/css/margin-bottom/index.md +++ b/files/fr/web/css/margin-bottom/index.md @@ -17,9 +17,9 @@ Cette propriété n'a aucun effet sur les éléments en ligne (_inline_) qui ne ```css /* Valeurs de longueur */ /* Type */ -margin-bottom: 10px; /* Une longueur absolue */ -margin-bottom: 1em; /* Une longueur relative à la taille du texte */ -margin-bottom: 5%; /* Une longueur relative à la +margin-bottom: 10px; /* Une longueur absolue */ +margin-bottom: 1em; /* Une longueur relative à la taille du texte */ +margin-bottom: 5%; /* Une longueur relative à la largeur du bloc englobant */ /* Valeurs avec un mot-clé */ @@ -58,17 +58,17 @@ Grâce à la feuille de style on définit la marge basse et la hauteur des diff ```css .box0 { - margin-bottom:1em; - height:3em; + margin-bottom: 1em; + height: 3em; } .box1 { - margin-bottom:-1.5em; - height:4em; + margin-bottom: -1.5em; + height: 4em; } .box2 { - border:1px dashed black; - border-width:1px 0; - margin-bottom:2em; + border: 1px dashed black; + border-width: 1px 0; + margin-bottom: 2em; } ``` @@ -76,13 +76,13 @@ On ajoute quelques règles afin de mieux visualiser les effets obtenus : ```css .container { - background-color:orange; - width:320px; - border:1px solid black; + background-color: orange; + width: 320px; + border: 1px solid black; } div { - width:320px; - background-color:gold; + width: 320px; + background-color: gold; } ``` @@ -90,9 +90,9 @@ div { ```html
              -
              Boîte 0
              -
              Boîte 1
              -
              La marge négative de 1 m'attire vers le haut
              +
              Boîte 0
              +
              Boîte 1
              +
              La marge négative de 1 m'attire vers le haut
              ``` From fbe72ae0a467ba71d3b9b005092bfbf2e7484d96 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Wed, 26 Jul 2023 23:42:47 -0700 Subject: [PATCH 27/31] fr: Format /web/css using Prettier (part 6) (#14631) --- files/fr/web/css/margin-inline-end/index.md | 6 +- files/fr/web/css/margin-inline-start/index.md | 6 +- files/fr/web/css/margin-inline/index.md | 8 +- files/fr/web/css/margin-left/index.md | 27 ++- files/fr/web/css/margin-right/index.md | 27 ++- files/fr/web/css/margin-top/index.md | 19 +- files/fr/web/css/margin/index.md | 34 ++- files/fr/web/css/mask-border/index.md | 8 +- files/fr/web/css/mask-image/index.md | 6 +- files/fr/web/css/mask-position/index.md | 4 +- files/fr/web/css/mask-repeat/index.md | 7 +- files/fr/web/css/mask-type/index.md | 41 +++- files/fr/web/css/mask/index.md | 31 +-- files/fr/web/css/max-block-size/index.md | 14 +- files/fr/web/css/max-height/index.md | 7 +- files/fr/web/css/max-width/index.md | 7 +- files/fr/web/css/max/index.md | 9 +- files/fr/web/css/min-height/index.md | 8 +- files/fr/web/css/min-width/index.md | 7 +- files/fr/web/css/min/index.md | 5 +- files/fr/web/css/minmax/index.md | 12 +- files/fr/web/css/mix-blend-mode/index.md | 201 ++++++++++++------ files/fr/web/css/object-fit/index.md | 24 ++- files/fr/web/css/object-position/index.md | 4 +- files/fr/web/css/offset-anchor/index.md | 11 +- files/fr/web/css/offset-distance/index.md | 2 +- files/fr/web/css/offset-path/index.md | 89 ++++---- files/fr/web/css/offset-position/index.md | 2 +- files/fr/web/css/offset-rotate/index.md | 6 +- files/fr/web/css/opacity/index.md | 21 +- files/fr/web/css/order/index.md | 10 +- files/fr/web/css/orphans/index.md | 36 ++-- files/fr/web/css/outline-color/index.md | 6 +- files/fr/web/css/outline-offset/index.md | 2 +- files/fr/web/css/outline-style/index.md | 5 +- files/fr/web/css/outline/index.md | 6 +- .../guide_to_scroll_anchoring/index.md | 2 +- files/fr/web/css/overflow-block/index.md | 54 +++-- files/fr/web/css/overflow-inline/index.md | 12 +- files/fr/web/css/overflow-wrap/index.md | 56 +++-- files/fr/web/css/overflow-x/index.md | 30 ++- files/fr/web/css/overflow-y/index.md | 46 ++-- files/fr/web/css/overflow/index.md | 58 ++--- files/fr/web/css/padding-block-end/index.md | 4 +- files/fr/web/css/padding-block-start/index.md | 4 +- files/fr/web/css/padding-block/index.md | 8 +- files/fr/web/css/padding-bottom/index.md | 6 +- files/fr/web/css/padding-inline-end/index.md | 4 +- .../fr/web/css/padding-inline-start/index.md | 8 +- files/fr/web/css/padding-inline/index.md | 8 +- files/fr/web/css/padding-left/index.md | 6 +- files/fr/web/css/padding-right/index.md | 6 +- files/fr/web/css/padding-top/index.md | 6 +- files/fr/web/css/page-break-before/index.md | 2 +- files/fr/web/css/page-break-inside/index.md | 17 +- files/fr/web/css/perspective-origin/index.md | 2 +- files/fr/web/css/perspective/index.md | 100 +++++---- files/fr/web/css/place-content/index.md | 44 ++-- files/fr/web/css/place-items/index.md | 12 +- files/fr/web/css/pointer-events/index.md | 16 +- files/fr/web/css/position/index.md | 90 +++++--- files/fr/web/css/position_value/index.md | 4 +- files/fr/web/css/print-color-adjust/index.md | 9 +- .../index.md | 6 +- files/fr/web/css/pseudo-classes/index.md | 20 +- files/fr/web/css/pseudo-elements/index.md | 19 +- files/fr/web/css/quotes/index.md | 17 +- files/fr/web/css/repeat/index.md | 20 +- files/fr/web/css/resize/index.md | 4 +- files/fr/web/css/resolution/index.md | 5 +- files/fr/web/css/revert/index.md | 23 +- files/fr/web/css/right/index.md | 4 +- files/fr/web/css/ruby-position/index.md | 4 +- files/fr/web/css/scroll-behavior/index.md | 5 +- files/fr/web/css/scroll-margin-block/index.md | 2 +- .../fr/web/css/scroll-margin-inline/index.md | 2 +- files/fr/web/css/scroll-margin/index.md | 2 +- .../fr/web/css/scroll-padding-block/index.md | 2 +- .../fr/web/css/scroll-padding-inline/index.md | 2 +- files/fr/web/css/scroll-padding/index.md | 2 +- files/fr/web/css/scroll-snap-stop/index.md | 9 +- files/fr/web/css/scroll-snap-type/index.md | 134 ++++++------ files/fr/web/css/scroll-timeline/index.md | 2 +- files/fr/web/css/scrollbar-color/index.md | 8 +- files/fr/web/css/scrollbar-width/index.md | 8 +- files/fr/web/css/selector_list/index.md | 43 +++- .../fr/web/css/shape-image-threshold/index.md | 22 +- files/fr/web/css/shape-margin/index.md | 14 +- files/fr/web/css/shape-outside/index.md | 10 +- 89 files changed, 975 insertions(+), 746 deletions(-) diff --git a/files/fr/web/css/margin-inline-end/index.md b/files/fr/web/css/margin-inline-end/index.md index 1745ae846b4bd4..63899bd65032f6 100644 --- a/files/fr/web/css/margin-inline-end/index.md +++ b/files/fr/web/css/margin-inline-end/index.md @@ -17,9 +17,9 @@ Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssx ```css /* Valeurs de longueur */ /* Type */ -margin-inline-end: 10px; /* Une longueur absolue */ -margin-inline-end: 1em; /* Une longueur relative à la taille du texte */ -margin-inline-end: 5%; /* Une largeur relative à la +margin-inline-end: 10px; /* Une longueur absolue */ +margin-inline-end: 1em; /* Une longueur relative à la taille du texte */ +margin-inline-end: 5%; /* Une largeur relative à la largeur du bloc englobant */ /* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/margin-inline-start/index.md b/files/fr/web/css/margin-inline-start/index.md index fc86a0445cc6b3..eeda769f8e4465 100644 --- a/files/fr/web/css/margin-inline-start/index.md +++ b/files/fr/web/css/margin-inline-start/index.md @@ -17,9 +17,9 @@ Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssx ```css /* Valeurs de longueur */ /* Type */ -margin-inline-start: 10px; /* Une longueur absolue */ -margin-inline-start: 1em; /* Une longueur relative à la taille du texte */ -margin-inline-start: 5%; /* Une largeur relative à la +margin-inline-start: 10px; /* Une longueur absolue */ +margin-inline-start: 1em; /* Une longueur relative à la taille du texte */ +margin-inline-start: 5%; /* Une largeur relative à la largeur du bloc englobant */ /* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/margin-inline/index.md b/files/fr/web/css/margin-inline/index.md index 2a3e40aa722fe7..c0d5680fb47eb3 100644 --- a/files/fr/web/css/margin-inline/index.md +++ b/files/fr/web/css/margin-inline/index.md @@ -11,10 +11,10 @@ La propriété **`margin-inline`** définit la marge sur les côtés de l'élém ```css /* Valeurs de longueur */ /* Type */ -margin-inline: 10px 20px; /* Une longueur absolue */ -margin-inline: 1em 2em; /* Une longueur relative à la taille du texte */ -margin-inline: 5% 2%; /* Une longueur relative à la largeur ou hauteur du bloc englobant */ -margin-inline: 10px; /* Une valeur utilisée pour les deux côtés */ +margin-inline: 10px 20px; /* Une longueur absolue */ +margin-inline: 1em 2em; /* Une longueur relative à la taille du texte */ +margin-inline: 5% 2%; /* Une longueur relative à la largeur ou hauteur du bloc englobant */ +margin-inline: 10px; /* Une valeur utilisée pour les deux côtés */ /* Valeurs avec un mot-clé */ margin-inline: auto; diff --git a/files/fr/web/css/margin-left/index.md b/files/fr/web/css/margin-left/index.md index 67cc7172531bc9..cb131e180d7044 100644 --- a/files/fr/web/css/margin-left/index.md +++ b/files/fr/web/css/margin-left/index.md @@ -21,9 +21,9 @@ Dans certains cas où la largeur est sur-contrainte (autrement dit quand `width` ```css /* Valeurs de longueur */ /* Type */ -margin-left: 10px; /* Une longueur absolue */ -margin-left: 1em; /* Une longueur absolue relative à la taille du texte */ -margin-left: 5%; /* Une marge dont la taille est relative à la largeur +margin-left: 10px; /* Une longueur absolue */ +margin-left: 1em; /* Une longueur absolue relative à la taille du texte */ +margin-left: 5%; /* Une marge dont la taille est relative à la largeur du bloc englobant */ /* Valeur avec un mot-clé */ @@ -148,20 +148,19 @@ Les valeurs en pourcentage pour `margin-left` sont relatives à la taille en lig ### HTML ```html -

              Un grand rosier se trouvait à l'entrée du jardin ; - les roses qu'il portait étaient blanches, mais - trois jardiniers étaient en train de les peindre - en rouge. +

              + Un grand rosier se trouvait à l'entrée du jardin ; les roses qu'il + portait étaient blanches, mais trois jardiniers étaient en train de les + peindre en rouge.

              -

              - Alice s'avança pour les regarder, et, au moment où - elle approchait, elle en entendit un qui disait : - « Fais donc attention, Cinq, et ne m'éclabousse pas - ainsi avec ta peinture. » +

              + Alice s'avança pour les regarder, et, au moment où elle approchait, elle en + entendit un qui disait : « Fais donc attention, Cinq, et ne + m'éclabousse pas ainsi avec ta peinture. »

              - « Ce n'est pas de ma faute, » dit Cinq d'un ton - bourru, « c'est Sept qui m'a poussé le coude. » + « Ce n'est pas de ma faute, » dit Cinq d'un ton bourru, « c'est + Sept qui m'a poussé le coude. »

              ``` diff --git a/files/fr/web/css/margin-right/index.md b/files/fr/web/css/margin-right/index.md index 2b7e9dfcf64562..3963a84f7b3838 100644 --- a/files/fr/web/css/margin-right/index.md +++ b/files/fr/web/css/margin-right/index.md @@ -17,9 +17,9 @@ Les marges des côtés droit et gauche de deux boîtes adjacentes peuvent fusion ```css /* Valeur de longueur */ /* Type */ -margin-right: 20px; /* Une longueur absolue */ -margin-right: 1em; /* Une longueur relative à la taille du texte */ -margin-right: 5%; /* Une marge relative à la largeur +margin-right: 20px; /* Une longueur absolue */ +margin-right: 1em; /* Une longueur relative à la taille du texte */ +margin-right: 5%; /* Une marge relative à la largeur du bloc englobant */ /* Valeur avec un mot-clé */ @@ -156,20 +156,19 @@ La valeur de cette propriété peut être le mot-clé `auto`, une longueur (`Un grand rosier se trouvait à l’entrée du jardin ; - les roses qu’il portait étaient blanches, mais - trois jardiniers étaient en train de les peindre - en rouge. +

              + Un grand rosier se trouvait à l’entrée du jardin ; les roses qu’il portait + étaient blanches, mais trois jardiniers étaient en train de les peindre en + rouge.

              -

              - Alice s’avança pour les regarder, et, au moment où - elle approchait, elle en entendit un qui disait : - « Fais donc attention, Cinq, et ne m’éclabousse pas - ainsi avec ta peinture. » +

              + Alice s’avança pour les regarder, et, au moment où elle approchait, elle en + entendit un qui disait : « Fais donc attention, Cinq, et ne + m’éclabousse pas ainsi avec ta peinture. »

              - « Ce n’est pas de ma faute, » dit Cinq d’un ton - bourru, « c’est Sept qui m’a poussé le coude. » + « Ce n’est pas de ma faute, » dit Cinq d’un ton bourru, « c’est + Sept qui m’a poussé le coude. »

              ``` diff --git a/files/fr/web/css/margin-top/index.md b/files/fr/web/css/margin-top/index.md index f68c5d789b72f5..82384fe3f2db7f 100644 --- a/files/fr/web/css/margin-top/index.md +++ b/files/fr/web/css/margin-top/index.md @@ -17,10 +17,10 @@ Cette propriété n'a aucun effet sur les éléments non-remplacés en ligne (_i ```css /* Valeurs de longueur */ /* Type */ -margin-top: 10px; /* Une longueur absolue */ -margin-top: 1em; /* Une longueur proportionnelle à la taille du texte */ -margin-top: 5%; /* Une marge relative à la largeur */ - /* du bloc englobant le plus proche */ +margin-top: 10px; /* Une longueur absolue */ +margin-top: 1em; /* Une longueur proportionnelle à la taille du texte */ +margin-top: 5%; /* Une marge relative à la largeur */ +/* du bloc englobant le plus proche */ /* Valeur avec un mot-clé */ margin-top: auto; @@ -72,12 +72,11 @@ div { ```html
              -

              - C’est ce qui arriva en effet, et bien plus tôt - qu’elle ne s’y attendait. Elle n’avait pas bu - la moitié de la bouteille, que sa tête touchait - au plafond et qu’elle fut forcée de se baisser - pour ne pas se casser le cou.

              +

              + C’est ce qui arriva en effet, et bien plus tôt qu’elle ne s’y attendait. Elle + n’avait pas bu la moitié de la bouteille, que sa tête touchait au plafond et + qu’elle fut forcée de se baisser pour ne pas se casser le cou. +

              ``` ### Résultat diff --git a/files/fr/web/css/margin/index.md b/files/fr/web/css/margin/index.md index b16afa68ff7596..6609a9e716d5e3 100644 --- a/files/fr/web/css/margin/index.md +++ b/files/fr/web/css/margin/index.md @@ -86,16 +86,8 @@ Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les type #### HTML ```html -
              - margin: auto; - background: gold; - width: 66%; -
              -
              - margin: 20px 0px 0px -20px; - background: gold; - width: 66%; -
              +
              margin: auto; background: gold; width: 66%;
              +
              margin: 20px 0px 0px -20px; background: gold; width: 66%;
              ``` #### Résultat @@ -105,23 +97,23 @@ Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les type ### Autres exemples ```css -margin: 5%; /* tous les côtés avec une marge de 5% */ -margin: 10px; /* tous les côtés avec une marge de 10px */ +margin: 5%; /* tous les côtés avec une marge de 5% */ +margin: 10px; /* tous les côtés avec une marge de 10px */ -margin: 1.6em 20px; /* haut et bas à 1.6em */ - /* gauche et droite à 20px */ +margin: 1.6em 20px; /* haut et bas à 1.6em */ +/* gauche et droite à 20px */ -margin: 10px 3% 1em; /* haut à 10px, gauche et droite à 3% */ - /* bas à 1em */ +margin: 10px 3% 1em; /* haut à 10px, gauche et droite à 3% */ +/* bas à 1em */ margin: 10px 3px 30px 5px; /* haut à 10px, droite à 3px */ - /* bas à 30px, gauche à 5px */ +/* bas à 30px, gauche à 5px */ -margin: 1em auto; /* marge de 1em en haut et en bas */ - /* la boîte est centrée horizontalement */ +margin: 1em auto; /* marge de 1em en haut et en bas */ +/* la boîte est centrée horizontalement */ -margin: auto; /* boîte centrée horizontalement */ - /* marge nulle en haut et en bas */ +margin: auto; /* boîte centrée horizontalement */ +/* marge nulle en haut et en bas */ ``` ## Notes diff --git a/files/fr/web/css/mask-border/index.md b/files/fr/web/css/mask-border/index.md index b0b5d8834a78cb..b7311295d4d85a 100644 --- a/files/fr/web/css/mask-border/index.md +++ b/files/fr/web/css/mask-border/index.md @@ -23,16 +23,16 @@ Cette propriété est une propriété raccourcie pour les propriétés suivantes ```css /* source | slice */ -mask-border: url('border-mask.png') 25; +mask-border: url("border-mask.png") 25; /* source | slice | repeat */ -mask-border: url('border-mask.png') 25 space; +mask-border: url("border-mask.png") 25 space; /* source | slice | width */ -mask-border: url('border-mask.png') 25 / 35px; +mask-border: url("border-mask.png") 25 / 35px; /* source | slice | width | outset | repeat | mode */ -mask-border: url('border-mask.png') 25 / 35px / 12px space alpha; +mask-border: url("border-mask.png") 25 / 35px / 12px space alpha; /* Valeurs globales */ mask-border: inherit; diff --git a/files/fr/web/css/mask-image/index.md b/files/fr/web/css/mask-image/index.md index 56dba2492f63c9..86fe1819c424ff 100644 --- a/files/fr/web/css/mask-image/index.md +++ b/files/fr/web/css/mask-image/index.md @@ -18,11 +18,11 @@ mask-image: none; mask-image: url(masks.svg#mask1); /* Valeurs de type */ -mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent); +mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent); mask-image: image(url(mask.png), skyblue); /* Gestion de plusieurs masques */ -mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent); +mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1), transparent); /* Valeurs globales */ mask-image: inherit; @@ -38,7 +38,7 @@ mask-image: unset; - `none` - : Le masque défini par ce mot-clé sera une image noire transparente. - `` - - : Une référence [`url()`](/fr/docs/Web/CSS/url()) vers un masque SVG ([``](/fr/docs/Web/SVG/Element/mask)) ou une image CSS. + - : Une référence [`url()`]() vers un masque SVG ([``](/fr/docs/Web/SVG/Element/mask)) ou une image CSS. - [``](/fr/docs/Web/CSS/image) - : Une image utilisée pour le masque. diff --git a/files/fr/web/css/mask-position/index.md b/files/fr/web/css/mask-position/index.md index 97879694842cb2..e86019c20da313 100644 --- a/files/fr/web/css/mask-position/index.md +++ b/files/fr/web/css/mask-position/index.md @@ -23,7 +23,9 @@ mask-position: 10% 8em; /* Valeurs multiples */ mask-position: top right; -mask-position: 1rem 1rem, center; +mask-position: + 1rem 1rem, + center; /* Valeurs globales */ mask-position: inherit; diff --git a/files/fr/web/css/mask-repeat/index.md b/files/fr/web/css/mask-repeat/index.md index 6ea03bb6d1ee7e..6529149db35393 100644 --- a/files/fr/web/css/mask-repeat/index.md +++ b/files/fr/web/css/mask-repeat/index.md @@ -134,19 +134,18 @@ Une ou plusieurs valeurs ``, séparées par des virgules. .exemple { height: 100px; width: 100px; - background-color: rgb(128,128,128); + background-color: rgb(128, 128, 128); border: solid black 1px; /* Pour voir la bordure */ -webkit-mask-clip: content; mask-clip: content; - -webkit-mask-image: url('https://developer.mozilla.org/static/img/favicon32.png'); - mask-image: url('https://developer.mozilla.org/static/img/favicon32.png'); + -webkit-mask-image: url("https://developer.mozilla.org/static/img/favicon32.png"); + mask-image: url("https://developer.mozilla.org/static/img/favicon32.png"); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; - } ``` diff --git a/files/fr/web/css/mask-type/index.md b/files/fr/web/css/mask-type/index.md index 2cad1cb7c4e66c..5977205c146d19 100644 --- a/files/fr/web/css/mask-type/index.md +++ b/files/fr/web/css/mask-type/index.md @@ -46,13 +46,21 @@ La propriété `mask-type` est définie avec un mot-clé parmi ceux définis ci- ```html
              - + - - + + @@ -80,13 +88,24 @@ La propriété `mask-type` est définie avec un mot-clé parmi ceux définis ci- ```html
              - + - - + diff --git a/files/fr/web/css/mask/index.md b/files/fr/web/css/mask/index.md index 845e887ccbad29..57680fd1bf7f3d 100644 --- a/files/fr/web/css/mask/index.md +++ b/files/fr/web/css/mask/index.md @@ -18,16 +18,16 @@ mask: none; /* Valeurs d'image */ /* Type */ -mask: url(mask.png); /* Image matricielle utilisée comme masque */ -mask: url(masks.svg#star); /* Élément d'un SVG utilisé comme masque */ +mask: url(mask.png); /* Image matricielle utilisée comme masque */ +mask: url(masks.svg#star); /* Élément d'un SVG utilisé comme masque */ /* Valeurs combinées */ -mask: url(masks.svg#star) luminance; /* Élément d'un SVG utilisé comme masque de luminance */ -mask: url(masks.svg#star) 40px 20px; /* Élément d'un SVG utilisé comme masque positioné à 40px du haut et 20px de la gauche */ -mask: url(masks.svg#star) 0 0/50px 50px; /* Élément d'un SVG utilisé comme masque avec une hauteur et largeur de 50px */ -mask: url(masks.svg#star) repeat-x; /* Élément d'un SVG utilisé comme masque répété horizontalement */ -mask: url(masks.svg#star) stroke-box; /* Élément d'un SVG utilisé comme masque étendu à la boîte contenu dans le contour */ -mask: url(masks.svg#star) exclude; /* Élément d'un SVG utilisé comme masque et combiné avec l'arrière-plan pour les parties qui ne se chevauchent pas */ +mask: url(masks.svg#star) luminance; /* Élément d'un SVG utilisé comme masque de luminance */ +mask: url(masks.svg#star) 40px 20px; /* Élément d'un SVG utilisé comme masque positioné à 40px du haut et 20px de la gauche */ +mask: url(masks.svg#star) 0 0/50px 50px; /* Élément d'un SVG utilisé comme masque avec une hauteur et largeur de 50px */ +mask: url(masks.svg#star) repeat-x; /* Élément d'un SVG utilisé comme masque répété horizontalement */ +mask: url(masks.svg#star) stroke-box; /* Élément d'un SVG utilisé comme masque étendu à la boîte contenu dans le contour */ +mask: url(masks.svg#star) exclude; /* Élément d'un SVG utilisé comme masque et combiné avec l'arrière-plan pour les parties qui ne se chevauchent pas */ /* Valeurs globales */ mask: inherit; @@ -63,18 +63,19 @@ mask: unset; ### HTML ```html -

              Il y avait une table servie sous un arbre devant - la maison, et le Lièvre y prenait le thé avec le Chapelier. Un Loir - profondément endormi était assis entre les deux autres qui s’en - servaient comme d’un coussin, le coude appuyé sur lui et causant - par-dessus sa tête.

              +

              + Il y avait une table servie sous un arbre devant la maison, et le Lièvre y + prenait le thé avec le Chapelier. Un Loir profondément endormi était assis + entre les deux autres qui s’en servaient comme d’un coussin, le coude appuyé + sur lui et causant par-dessus sa tête. +

              ``` ### CSS ```css -.exemple{ - mask:url(firefox.png) luminance 20%; +.exemple { + mask: url(firefox.png) luminance 20%; } ``` diff --git a/files/fr/web/css/max-block-size/index.md b/files/fr/web/css/max-block-size/index.md index c9aca091f16bf0..4d68962472ba28 100644 --- a/files/fr/web/css/max-block-size/index.md +++ b/files/fr/web/css/max-block-size/index.md @@ -63,10 +63,10 @@ La propriété `max-block-size` peut prendre les mêmes valeurs que les proprié La valeur de `writing-mode` détermine la propriété physique correspondant à `max-block-size` : -| Valeur pour `writing-mode` | Propriété physique équivalente à `max-block-size` | -| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | -| `horizontal-tb`, `lr` {{deprecated_inline}}, `lr-tb` {{deprecated_inline}}, `rl` {{deprecated_inline}}, `rb` {{deprecated_inline}}, `rb-rl` {{deprecated_inline}} | [`max-height`](/fr/docs/Web/CSS/max-height) | -| `vertical-rl`, `vertical-lr`, `sideways-rl` {{experimental_inline}}, `sideways-lr` {{experimental_inline}}, `tb` {{deprecated_inline}}, `tb-rl` {{deprecated_inline}} | [`max-width`](/fr/docs/Web/CSS/max-width) | +| Valeur pour `writing-mode` | Propriété physique équivalente à `max-block-size` | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | +| `horizontal-tb`, `lr` {{deprecated_inline}}, `lr-tb` {{deprecated_inline}}, `rl` {{deprecated_inline}}, `rb` {{deprecated_inline}}, `rb-rl` {{deprecated_inline}} | [`max-height`](/fr/docs/Web/CSS/max-height) | +| `vertical-rl`, `vertical-lr`, `sideways-rl` {{experimental_inline}}, `sideways-lr` {{experimental_inline}}, `tb` {{deprecated_inline}}, `tb-rl` {{deprecated_inline}} | [`max-width`](/fr/docs/Web/CSS/max-width) | > **Note :** Les valeurs `sideways-lr` et `sideways-rl` pour `writing-mode` ont été retirées du module de spécification CSS sur les modes d'écriture de niveau 3 en fin de processus et pourraient être réintroduites dans la spécification de niveau 4. @@ -121,7 +121,11 @@ On a ensuite les classes `horizontal` et `vertical`, qui ajoutent la propriété padding: 4px; background-color: #abcdef; color: #000; - font: 16px "Open Sans", "Helvetica", "Arial", sans-serif; + font: + 16px "Open Sans", + "Helvetica", + "Arial", + sans-serif; max-block-size: 160px; min-block-size: 100px; } diff --git a/files/fr/web/css/max-height/index.md b/files/fr/web/css/max-height/index.md index d2e45942c06622..6e681d3c50a508 100644 --- a/files/fr/web/css/max-height/index.md +++ b/files/fr/web/css/max-height/index.md @@ -66,10 +66,11 @@ max-height: unset; ### HTML ```html -
              Lorem ipsum tralala sit amet, consectetur adipisicing +
              + Lorem ipsum tralala sit amet, consectetur adipisicing

              - Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat.

              ``` diff --git a/files/fr/web/css/max-width/index.md b/files/fr/web/css/max-width/index.md index 0bb62709836f70..22dfbf6e2b79e4 100644 --- a/files/fr/web/css/max-width/index.md +++ b/files/fr/web/css/max-width/index.md @@ -66,10 +66,11 @@ max-width: unset; #### HTML ```html -
              Lorem ipsum tralala sit amet, consectetur adipisicing +
              + Lorem ipsum tralala sit amet, consectetur adipisicing

              - Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat.

              ``` diff --git a/files/fr/web/css/max/index.md b/files/fr/web/css/max/index.md index 42b11cb4591eff..38807ff3c9e670 100644 --- a/files/fr/web/css/max/index.md +++ b/files/fr/web/css/max/index.md @@ -49,7 +49,10 @@ Il est tout à fait possible de combiner des valeurs avec différentes unités d #### HTML ```html - + ``` #### Résultat @@ -79,7 +82,9 @@ Avec ces règles, la valeur pour `font-size` vaudra au moins `2rems` ou deux foi ```html

              Ce texte est toujours lisible mais sa taille ne change pas.

              -

              Ce texte est toujours lisible et s'adapte dans une certaine mesure.

              +

              + Ce texte est toujours lisible et s'adapte dans une certaine mesure. +

              ``` #### Résultat diff --git a/files/fr/web/css/min-height/index.md b/files/fr/web/css/min-height/index.md index 3e876b08d7ebb7..c82975c71ee188 100644 --- a/files/fr/web/css/min-height/index.md +++ b/files/fr/web/css/min-height/index.md @@ -63,9 +63,13 @@ min-height: unset; ### Définition de min-height ```css -table { min-height: 75%; } +table { + min-height: 75%; +} -form { min-height: 0; } +form { + min-height: 0; +} ``` ## Spécifications diff --git a/files/fr/web/css/min-width/index.md b/files/fr/web/css/min-width/index.md index 4a103f7bfdad89..bb393b9be6f3c5 100644 --- a/files/fr/web/css/min-width/index.md +++ b/files/fr/web/css/min-width/index.md @@ -65,10 +65,11 @@ min-width: unset; ### HTML ```html -
              Lorem ipsum tralala sit amet, consectetur adipisicing +
              + Lorem ipsum tralala sit amet, consectetur adipisicing

              - Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat.

              ``` diff --git a/files/fr/web/css/min/index.md b/files/fr/web/css/min/index.md index b7db5758e1b642..57dad1812cfe29 100644 --- a/files/fr/web/css/min/index.md +++ b/files/fr/web/css/min/index.md @@ -41,7 +41,8 @@ La fonction `min()` peut également être utilisée pour définir la taille maxi #### CSS ```css -input, label { +input, +label { padding: 2px; box-sizing: border-box; display: inline-block; @@ -63,7 +64,7 @@ On a ici la règle qui s'applique au formulaire et qui occupe 100% de la largeur ```html
              - +
              ``` diff --git a/files/fr/web/css/minmax/index.md b/files/fr/web/css/minmax/index.md index 14da9f97287abb..3f769b4aa52348 100644 --- a/files/fr/web/css/minmax/index.md +++ b/files/fr/web/css/minmax/index.md @@ -99,15 +99,9 @@ Si _max_ est inférieur à _min_, alors _max_ sera ignoré et `minmax(min,max)` ```html
              -
              - Aussi large que le contenu, large d'au plus 300 pixels. -
              -
              - Item flexible mais dont la largeur vaut au moins 200 pixels. -
              -
              - Item avec une largeur de 150 pixels. -
              +
              Aussi large que le contenu, large d'au plus 300 pixels.
              +
              Item flexible mais dont la largeur vaut au moins 200 pixels.
              +
              Item avec une largeur de 150 pixels.
              ``` diff --git a/files/fr/web/css/mix-blend-mode/index.md b/files/fr/web/css/mix-blend-mode/index.md index 5c37289a6d2774..14551f8150e9ab 100644 --- a/files/fr/web/css/mix-blend-mode/index.md +++ b/files/fr/web/css/mix-blend-mode/index.md @@ -55,24 +55,27 @@ mix-blend-mode: unset; ```html hidden
              -
              Blending in isolation (no blending with the background)
              +
              + Blending in isolation (no blending with the background) +
              -
              normal +
              + normal
              - + - + - + @@ -83,7 +86,8 @@ mix-blend-mode: unset;
              -
              multiply +
              + multiply
              @@ -95,7 +99,8 @@ mix-blend-mode: unset;
              -
              darken +
              + darken
              @@ -107,7 +112,8 @@ mix-blend-mode: unset;
              -
              screen +
              + screen
              @@ -119,7 +125,8 @@ mix-blend-mode: unset;
              -
              lighten +
              + lighten
              @@ -131,7 +138,8 @@ mix-blend-mode: unset;
              -
              overlay +
              + overlay
              @@ -143,7 +151,8 @@ mix-blend-mode: unset;
              -
              color-dodge +
              + color-dodge
              @@ -155,7 +164,8 @@ mix-blend-mode: unset;
              -
              color-burn +
              + color-burn
              @@ -167,7 +177,8 @@ mix-blend-mode: unset;
              -
              hard-light +
              + hard-light
              @@ -179,7 +190,8 @@ mix-blend-mode: unset;
              -
              soft-light +
              + soft-light
              @@ -191,7 +203,8 @@ mix-blend-mode: unset;
              -
              difference +
              + difference
              @@ -203,7 +216,8 @@ mix-blend-mode: unset;
              -
              exclusion +
              + exclusion
              @@ -215,7 +229,8 @@ mix-blend-mode: unset;
              -
              hue +
              + hue
              @@ -227,7 +242,8 @@ mix-blend-mode: unset;
              -
              saturation +
              + saturation
              @@ -239,7 +255,8 @@ mix-blend-mode: unset;
              -
              color +
              + color
              @@ -251,7 +268,8 @@ mix-blend-mode: unset;
              -
              luminosity +
              + luminosity
              @@ -267,7 +285,8 @@ mix-blend-mode: unset;
              Blending globally (blend with the background)
              -
              normal +
              + normal
              @@ -279,7 +298,8 @@ mix-blend-mode: unset;
              -
              multiply +
              + multiply
              @@ -291,7 +311,8 @@ mix-blend-mode: unset;
              -
              darken +
              + darken
              @@ -303,7 +324,8 @@ mix-blend-mode: unset;
              -
              screen +
              + screen
              @@ -315,7 +337,8 @@ mix-blend-mode: unset;
              -
              lighten +
              + lighten
              @@ -327,7 +350,8 @@ mix-blend-mode: unset;
              -
              overlay +
              + overlay
              @@ -339,7 +363,8 @@ mix-blend-mode: unset;
              -
              color-dodge +
              + color-dodge
              @@ -351,7 +376,8 @@ mix-blend-mode: unset;
              -
              color-burn +
              + color-burn
              @@ -363,7 +389,8 @@ mix-blend-mode: unset;
              -
              hard-light +
              + hard-light
              @@ -375,7 +402,8 @@ mix-blend-mode: unset;
              -
              soft-light +
              + soft-light
              @@ -387,7 +415,8 @@ mix-blend-mode: unset;
              -
              difference +
              + difference
              @@ -399,7 +428,8 @@ mix-blend-mode: unset;
              -
              exclusion +
              + exclusion
              @@ -411,7 +441,8 @@ mix-blend-mode: unset;
              -
              hue +
              + hue
              @@ -423,7 +454,8 @@ mix-blend-mode: unset;
              -
              saturation +
              + saturation
              @@ -435,7 +467,8 @@ mix-blend-mode: unset;
              -
              color +
              + color
              @@ -447,7 +480,8 @@ mix-blend-mode: unset;
              -
              luminosity +
              + luminosity
              @@ -465,10 +499,11 @@ mix-blend-mode: unset; ``` ```css hidden -html,body { +html, +body { height: 100%; box-sizing: border-box; - background: #EEE; + background: #eee; } .grid { @@ -493,9 +528,9 @@ html,body { } .cell { - margin: .5em; - padding: .5em; - background-color: #FFF; + margin: 0.5em; + padding: 0.5em; + background-color: #fff; overflow: hidden; text-align: center; } @@ -503,8 +538,8 @@ html,body { .note { background: #fff3d4; padding: 1em; - margin: .5em .5em 0; - font: .8em sans-serif; + margin: 0.5em 0.5em 0; + font: 0.8em sans-serif; text-align: left; white-space: nowrap; } @@ -515,8 +550,8 @@ html,body { .container { position: relative; - background: linear-gradient(to right, #000 0%, transparent 50%, #FFF 100%), - linear-gradient(to bottom, #FF0 0%, #F0F 50%, #0FF 100%); + background: linear-gradient(to right, #000 0%, transparent 50%, #fff 100%), + linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%); width: 150px; height: 150px; margin: 0 auto; @@ -540,24 +575,58 @@ html,body { fill: url(#blue); } -.isolate .group { isolation: isolate; } - -.normal .item { mix-blend-mode: normal; } -.multiply .item { mix-blend-mode: multiply; } -.screen .item { mix-blend-mode: screen; } -.overlay .item { mix-blend-mode: overlay; } -.darken .item { mix-blend-mode: darken; } -.lighten .item { mix-blend-mode: lighten; } -.color-dodge .item { mix-blend-mode: color-dodge; } -.color-burn .item { mix-blend-mode: color-burn; } -.hard-light .item { mix-blend-mode: hard-light; } -.soft-light .item { mix-blend-mode: soft-light; } -.difference .item { mix-blend-mode: difference; } -.exclusion .item { mix-blend-mode: exclusion; } -.hue .item { mix-blend-mode: hue; } -.saturation .item { mix-blend-mode: saturation; } -.color .item { mix-blend-mode: color; } -.luminosity .item { mix-blend-mode: luminosity; } +.isolate .group { + isolation: isolate; +} + +.normal .item { + mix-blend-mode: normal; +} +.multiply .item { + mix-blend-mode: multiply; +} +.screen .item { + mix-blend-mode: screen; +} +.overlay .item { + mix-blend-mode: overlay; +} +.darken .item { + mix-blend-mode: darken; +} +.lighten .item { + mix-blend-mode: lighten; +} +.color-dodge .item { + mix-blend-mode: color-dodge; +} +.color-burn .item { + mix-blend-mode: color-burn; +} +.hard-light .item { + mix-blend-mode: hard-light; +} +.soft-light .item { + mix-blend-mode: soft-light; +} +.difference .item { + mix-blend-mode: difference; +} +.exclusion .item { + mix-blend-mode: exclusion; +} +.hue .item { + mix-blend-mode: hue; +} +.saturation .item { + mix-blend-mode: saturation; +} +.color .item { + mix-blend-mode: color; +} +.luminosity .item { + mix-blend-mode: luminosity; +} ``` {{EmbedLiveSample("Exemples", "100%", 1600, "", "", "example-outcome-frame")}} @@ -568,9 +637,9 @@ html,body { ```html - - - + + + ``` diff --git a/files/fr/web/css/object-fit/index.md b/files/fr/web/css/object-fit/index.md index b28a74f4842e86..9bb685fe7dd16b 100644 --- a/files/fr/web/css/object-fit/index.md +++ b/files/fr/web/css/object-fit/index.md @@ -63,29 +63,29 @@ La propriété `object-fit` peut être définie grâce à l'un des mots-clés su ```html

              object-fit: fill

              - Logo MDN + Logo MDN - Logo MDN + Logo MDN

              object-fit: contain

              - Logo MDN + Logo MDN - Logo MDN + Logo MDN

              object-fit: cover

              - Logo MDN + Logo MDN - Logo MDN + Logo MDN

              object-fit: none

              - Logo MDN + Logo MDN - Logo MDN + Logo MDN

              object-fit: scale-down

              - Logo MDN + Logo MDN - Logo MDN + Logo MDN
              ``` @@ -93,7 +93,9 @@ La propriété `object-fit` peut être définie grâce à l'un des mots-clés su ```css h2 { - font-family: Courier New, monospace; + font-family: + Courier New, + monospace; font-size: 1em; margin: 1em 0 0.3em; } diff --git a/files/fr/web/css/object-position/index.md b/files/fr/web/css/object-position/index.md index 9a1056bf3cc602..28bc9c355c7443 100644 --- a/files/fr/web/css/object-position/index.md +++ b/files/fr/web/css/object-position/index.md @@ -47,8 +47,8 @@ object-position: unset; Dans ce fragment HTML, on a deux éléments [``](/fr/docs/Web/HTML/Element/img), chacun affichant le logo de MDN. ```html -Logo MDN -Logo MDN +Logo MDN +Logo MDN ``` ### CSS diff --git a/files/fr/web/css/offset-anchor/index.md b/files/fr/web/css/offset-anchor/index.md index 865481fdc8b052..82559a60688627 100644 --- a/files/fr/web/css/offset-anchor/index.md +++ b/files/fr/web/css/offset-anchor/index.md @@ -80,14 +80,21 @@ On peut voir que la première valeur, `auto`, déplace l'élément sur son centr ```css div { - offset-path: path('M 0,20 L 200,20'); + offset-path: path("M 0,20 L 200,20"); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; } section { - background-image: linear-gradient(to bottom, transparent, transparent 49%, #000 50%, #000 51%, transparent 52%); + background-image: linear-gradient( + to bottom, + transparent, + transparent 49%, + #000 50%, + #000 51%, + transparent 52% + ); border: 1px solid #ccc; margin-bottom: 10px; } diff --git a/files/fr/web/css/offset-distance/index.md b/files/fr/web/css/offset-distance/index.md index 25815bea4df1c0..5fd49a20d36a81 100644 --- a/files/fr/web/css/offset-distance/index.md +++ b/files/fr/web/css/offset-distance/index.md @@ -44,7 +44,7 @@ La notion de mouvement contenue dans _CSS Motion Path_ vient principalement de l ```css #motion-demo { - offset-path: path('M20,20 C20,100 200,0 200,100'); + offset-path: path("M20,20 C20,100 200,0 200,100"); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; diff --git a/files/fr/web/css/offset-path/index.md b/files/fr/web/css/offset-path/index.md index 4fc29671c7226f..42b1e3d358545b 100644 --- a/files/fr/web/css/offset-path/index.md +++ b/files/fr/web/css/offset-path/index.md @@ -32,7 +32,7 @@ offset-path: url(#path); offset-path: circle(50% at 25% 25%); offset-path: inset(50% 50% 50% 50%); offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%); -offset-path: path('M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200'); +offset-path: path("M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200"); /* Boîtes géométriques */ offset-path: margin-box; @@ -78,15 +78,17 @@ L'exemple qui suit est tiré de [cette démo présente sur CodePen](https://code ```css .scissorHalf { - offset-path: path('M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190'); + offset-path: path( + "M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190" + ); animation: followpath 4s linear infinite; } @keyframes followpath { - to { - motion-offset: 100%; - offset-distance: 100%; - } + to { + motion-offset: 100%; + offset-distance: 100%; + } } ``` @@ -95,44 +97,45 @@ L'exemple qui suit est tiré de [cette démo présente sur CodePen](https://code Les moitiés supérieure et inférieure des ciseaux apparaîtront dans le coin en haut à gauche du canevas si elles ne sont pas positionnés sur le point de départ avec `offset-path`. ```html - + House and Scissors - - - - - - + + + + + + ``` diff --git a/files/fr/web/css/offset-position/index.md b/files/fr/web/css/offset-position/index.md index 4366fb40952b58..044b0724f08474 100644 --- a/files/fr/web/css/offset-position/index.md +++ b/files/fr/web/css/offset-position/index.md @@ -64,7 +64,7 @@ offset-position: unset; ```css #motion-demo { - offset-path: path('M20,20 C20,100 200,0 200,100'); + offset-path: path("M20,20 C20,100 200,0 200,100"); offset-position: left top; animation: move 3000ms infinite alternate ease-in-out; width: 40px; diff --git a/files/fr/web/css/offset-rotate/index.md b/files/fr/web/css/offset-rotate/index.md index ff5553d499a1e4..3d76652e50d9bb 100644 --- a/files/fr/web/css/offset-rotate/index.md +++ b/files/fr/web/css/offset-rotate/index.md @@ -23,7 +23,7 @@ offset-rotate: reverse; /* Conserve une rotation constante quelle que soit la position /* sur le chemin */ offset-rotate: 90deg; -offset-rotate: .5turn; +offset-rotate: 0.5turn; ``` - `auto` @@ -51,12 +51,12 @@ offset-rotate: .5turn; div { width: 40px; height: 40px; - background: #2BC4A2; + background: #2bc4a2; margin: 20px; clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%); animation: move 5000ms infinite alternate ease-in-out; - offset-path: path('M20,20 C20,50 180,-10 180,20'); + offset-path: path("M20,20 C20,50 180,-10 180,20"); } div:nth-child(1) { offset-rotate: auto; diff --git a/files/fr/web/css/opacity/index.md b/files/fr/web/css/opacity/index.md index 451774da6f2c48..d9048ae73cc00b 100644 --- a/files/fr/web/css/opacity/index.md +++ b/files/fr/web/css/opacity/index.md @@ -18,13 +18,13 @@ La valeur s'applique à l'ensemble de l'élément et à ce qu'il contient même /* Valeurs numériques */ /* Totalement opaque */ opacity: 1; -opacity: 1.0; +opacity: 1; /* Légèrement transparent */ opacity: 0.6; /* Complètement transparent */ -opacity: 0.0; +opacity: 0; opacity: 0; /* Valeurs globales */ @@ -39,11 +39,11 @@ opacity: unset; - : Une valeur de type {{cssxref("<number>")}} dans l'intervalle \[`0.0`, `1.0]` qui représente l'opacité de l'élément, la valeur de son canal alpha. Les valeurs en dehors de cet intervalle seront considérées comme valides mais ramenées dans cet intervalle (ainsi `6` sera équivalent à `1` et -2 sera équivalent à `0`). - | Valeur | Signification | - | --------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | - | `0` | L'élément est complètement transparent (invisible). | + | Valeur | Signification | + | ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | + | `0` | L'élément est complètement transparent (invisible). | | Toute valeur de type {{cssxref("<number>")}} strictement comprise entre `0` et `1` | L'élément est partiellement transparent, on peut voir l'arrière-plan. | - | `1` (la valeur par défaut) | L'élément est complètement opaque. | + | `1` (la valeur par défaut) | L'élément est complètement opaque. | ## Définition formelle @@ -113,9 +113,12 @@ img.opacity:hover { #### HTML ```html -MDN logo +MDN logo ``` #### Résultat diff --git a/files/fr/web/css/order/index.md b/files/fr/web/css/order/index.md index df0689fe9080be..e4030c487e1495 100644 --- a/files/fr/web/css/order/index.md +++ b/files/fr/web/css/order/index.md @@ -44,10 +44,10 @@ order: unset; ### HTML ```html -
              -
              Lorem ipsum
              - - +
              +
              Lorem ipsum
              + +
              ``` @@ -61,7 +61,7 @@ Grâce à ces déclarations CSS, on crée un disposition avec deux barres entour } #main > article { - flex:1; + flex: 1; order: 2; border: 1px dotted orange; } diff --git a/files/fr/web/css/orphans/index.md b/files/fr/web/css/orphans/index.md index 5b36446e06a799..74d1dc9668e3a4 100644 --- a/files/fr/web/css/orphans/index.md +++ b/files/fr/web/css/orphans/index.md @@ -40,25 +40,23 @@ orphans: unset; ### HTML ```html -

              - Tout en causant ainsi, Alice était entrée dans une petite chambre - bien rangée, et, comme elle s’y attendait, sur une petite table - dans l’embrasure de la fenêtre, elle vit un éventail et deux ou - trois paires de gants de chevreau tout petits. Elle en prit une - paire, ainsi que l’éventail, et allait quitter la chambre lorsqu’ - elle aperçut, près du miroir, une petite bouteille. Cette fois il - n’y avait pas l’inscription BUVEZ-MOI — ce qui n’empêcha pas Alice - de la déboucher et de la porter à ses lèvres. « Il m’arrive toujours - quelque chose d’intéressant, » se dit-elle, « lorsque je mange ou - que je bois. Je vais voir un peu l’effet de cette bouteille. - J’espère bien qu’elle me fera regrandir, car je suis vraiment - fatiguée de n’être qu’une petite nabote ! »C’est ce qui arriva en - effet, et bien plus tôt qu’elle ne s’y attendait. Elle n’avait pas - bu la moitié de la bouteille, que sa tête touchait au plafond et - qu’elle fut forcée de se baisser pour ne pas se casser le cou. Elle - remit bien vite la bouteille sur la table en se disant : « En voilà - assez ; j’espère ne pas grandir davantage. Je ne puis déjà plus - passer par la porte. Oh ! je voudrais bien n’avoir pas tant bu ! » +

              + Tout en causant ainsi, Alice était entrée dans une petite chambre bien rangée, + et, comme elle s’y attendait, sur une petite table dans l’embrasure de la + fenêtre, elle vit un éventail et deux ou trois paires de gants de chevreau + tout petits. Elle en prit une paire, ainsi que l’éventail, et allait quitter + la chambre lorsqu’ elle aperçut, près du miroir, une petite bouteille. Cette + fois il n’y avait pas l’inscription BUVEZ-MOI — ce qui n’empêcha pas Alice de + la déboucher et de la porter à ses lèvres. « Il m’arrive toujours quelque + chose d’intéressant, » se dit-elle, « lorsque je mange ou que je bois. Je vais + voir un peu l’effet de cette bouteille. J’espère bien qu’elle me fera + regrandir, car je suis vraiment fatiguée de n’être qu’une petite nabote ! + »C’est ce qui arriva en effet, et bien plus tôt qu’elle ne s’y attendait. Elle + n’avait pas bu la moitié de la bouteille, que sa tête touchait au plafond et + qu’elle fut forcée de se baisser pour ne pas se casser le cou. Elle remit bien + vite la bouteille sur la table en se disant : « En voilà assez ; j’espère ne + pas grandir davantage. Je ne puis déjà plus passer par la porte. Oh ! je + voudrais bien n’avoir pas tant bu ! »

              ``` diff --git a/files/fr/web/css/outline-color/index.md b/files/fr/web/css/outline-color/index.md index 963a6a5b48e5b7..5551edabe91b3f 100644 --- a/files/fr/web/css/outline-color/index.md +++ b/files/fr/web/css/outline-color/index.md @@ -22,7 +22,7 @@ outline-color: invert; /* Type */ outline-color: red; outline-color: #f92525; -outline-color: rgb(30,222,121); +outline-color: rgb(30, 222, 121); /* Valeurs globales */ outline-color: inherit; @@ -65,7 +65,7 @@ La propriété `outline-color` est définie avec une des valeurs listées ci-apr /* Ensuite on précise sa couleur avec */ /* outline-color */ - outline-color: #0000FF; + outline-color: #0000ff; } ``` @@ -81,7 +81,7 @@ Le ratio de contraste est déterminé en comparaisant les luminosités des deux - [Vérificateur de contraste WebAIM (en anglais)](https://webaim.org/resources/contrastchecker/) - [Comprendre les règles WCAG 1.4](/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) -- _[Understanding Success Criterion 1.4.3 - W3C Understanding WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) +- _[Understanding Success Criterion 1.4.3 - W3C Understanding WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)_ ## Spécifications diff --git a/files/fr/web/css/outline-offset/index.md b/files/fr/web/css/outline-offset/index.md index 157fc8941d852b..9682669c230f6e 100644 --- a/files/fr/web/css/outline-offset/index.md +++ b/files/fr/web/css/outline-offset/index.md @@ -55,7 +55,7 @@ outline-offset: unset; ### HTML ```html -

              La bordure est décalée

              +

              La bordure est décalée

              ``` ### Résultat diff --git a/files/fr/web/css/outline-style/index.md b/files/fr/web/css/outline-style/index.md index 077194c6c8629f..0b0455a89e3e0c 100644 --- a/files/fr/web/css/outline-style/index.md +++ b/files/fr/web/css/outline-style/index.md @@ -107,7 +107,10 @@ La valeur `auto` indique une bordure sur mesure selon l'interface du système d' } /* To make the Demo clearer */ -* { outline-width: 10px; padding: 15px; } +* { + outline-width: 10px; + padding: 15px; +} ``` #### HTML diff --git a/files/fr/web/css/outline/index.md b/files/fr/web/css/outline/index.md index 807ef7f61e7a7f..43134ae571c511 100644 --- a/files/fr/web/css/outline/index.md +++ b/files/fr/web/css/outline/index.md @@ -91,7 +91,7 @@ La propriété `outline` peut être définie avec une, deux ou trois valeurs par ```html

              petit texte - Grand Texte + Grand Texte petit texte

              ``` @@ -104,7 +104,7 @@ La propriété `outline` peut être définie avec une, deux ou trois valeurs par } .grand { - font-size:xx-large; + font-size: xx-large; } ``` @@ -118,7 +118,7 @@ Utiliser la propriété `outline` avec une valeur `0` ou `none` supprimera le st - {{cssxref(":focus")}} - [Comment concevoir des indicateurs de focus utiles et utilisables (en anglais)](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/) -- [_Understanding Success Criterion 2.4.7 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html) +- [_Understanding Success Criterion 2.4.7 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html) ## Spécifications diff --git a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md index 29b1c9ee82c9ee..f1176601cff5d9 100644 --- a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md +++ b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md @@ -1,5 +1,5 @@ --- -title: 'Guide : ancrage du défilement (scroll anchoring)' +title: "Guide : ancrage du défilement (scroll anchoring)" slug: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring translation_of: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring --- diff --git a/files/fr/web/css/overflow-block/index.md b/files/fr/web/css/overflow-block/index.md index 806f499a26270c..9d6a5066679955 100644 --- a/files/fr/web/css/overflow-block/index.md +++ b/files/fr/web/css/overflow-block/index.md @@ -58,34 +58,60 @@ La propriété `overflow-block` est définie avec une valeur de type [` -
            • overflow-block:hidden — masque le texte en dehors -
              - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
            • + overflow-block:hidden — masque le texte en dehors +
              + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur.
              • -
            • overflow-block:scroll — ajoute une barre de défilement -
              - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
            • + overflow-block:scroll — ajoute une barre de défilement +
              + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur.
            • - overflow-block: clip (masque le texte en dehors de la boîte au-delà du bord de dépassement) + overflow-block: clip (masque le texte en dehors de la boîte + au-delà du bord de dépassement)
              - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur.
              • -
            • overflow-block:visible — affiche le texte en dehors si besoin -
              - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
            • + overflow-block:visible — affiche le texte en dehors si besoin +
              + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur.
              • -
            • overflow-block:auto — pour la plupart des navigateurs, équivalent à scroll -
              - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
            • + overflow-block:auto — pour la plupart des navigateurs, + équivalent à scroll +
              + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur.
            diff --git a/files/fr/web/css/overflow-inline/index.md b/files/fr/web/css/overflow-inline/index.md index 9ab2760482ee0a..25f47138e413e4 100644 --- a/files/fr/web/css/overflow-inline/index.md +++ b/files/fr/web/css/overflow-inline/index.md @@ -64,22 +64,26 @@ La propriété `overflow-inline` est définie avec une valeur de type [`
          • - overflow-inline: scroll (ajoute une barre de défilement quoi qu'il arrive) + overflow-inline: scroll (ajoute une barre de défilement quoi + qu'il arrive)
            ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
          • - overflow-inline: visible (affiche le texte en dehors de la boîte si nécessaire) + overflow-inline: visible (affiche le texte en dehors de la + boîte si nécessaire)
            ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
          • - overflow-inline: auto (équivalent à scroll pour la plupart des navigateurs) + overflow-inline: auto (équivalent à scroll pour la + plupart des navigateurs)
            ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
          • - overflow-inline: clip (masque le texte en dehors de la boîte au-delà du bord de dépassement) + overflow-inline: clip (masque le texte en dehors de la boîte + au-delà du bord de dépassement) clip
            ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
            • diff --git a/files/fr/web/css/overflow-wrap/index.md b/files/fr/web/css/overflow-wrap/index.md index c76d597ba2a591..10528bfc8a8482 100644 --- a/files/fr/web/css/overflow-wrap/index.md +++ b/files/fr/web/css/overflow-wrap/index.md @@ -81,33 +81,47 @@ p { ```html

            normal

            -

            They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, - though I've never been there myself.

            +

            + They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg, though + I've never been there myself. +

            overflow-wrap: anywhere

            -

            They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, - though I've never been there myself.

            +

            + They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg, + though I've never been there myself. +

            overflow-wrap: break-word

            -

            They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, - though I've never been there myself.

            +

            + They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg, + though I've never been there myself. +

            word-break: break-all

            -

            They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, - though I've never been there myself.

            +

            + They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg, + though I've never been there myself. +

            hyphens: auto, without lang attribute

            -

            They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg - though I've never been there myself.

            +

            + They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg though I've never been + there myself. +

            hyphens: auto, English rules

            -

            They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, - though I've never been there myself.

            +

            + They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been + there myself. +

            hyphens: auto, German rules

            -

            They say the fishing is excellent at - Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, - though I've never been there myself.

            +

            + They say the fishing is excellent at Lake + Chargoggagoggmanchauggagoggchaubunagungamaugg, though I've never been + there myself. +

            ``` ### Résultat diff --git a/files/fr/web/css/overflow-x/index.md b/files/fr/web/css/overflow-x/index.md index 51279821294732..2e822bf3a26c2c 100644 --- a/files/fr/web/css/overflow-x/index.md +++ b/files/fr/web/css/overflow-x/index.md @@ -62,28 +62,26 @@ Si [`overflow-y`](/fr/docs/Web/CSS/overflow-y) vaut `hidden`, `scroll` ou `auto` ```html
              -
            • overflow-x:hidden — cache le texte en dehors de la boîte -
              - ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ -
              +
            • + overflow-x:hidden — cache le texte en dehors de la boîte +
              ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
              • -
            • overflow-x:scroll — ajoute toujours un ascenseur -
              - ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ -
              +
            • + overflow-x:scroll — ajoute toujours un ascenseur +
              ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
              • -
            • overflow-x:visible — affiche le texte en dehors de la boîte si besoin -
              - ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ -
              +
            • + overflow-x:visible — affiche le texte en dehors de la boîte si + besoin +
              ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
              • -
            • overflow-x:auto — sur la plupart des navigateurs, cela sera équivalent à scroll -
              - ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ -
              +
            • + overflow-x:auto — sur la plupart des navigateurs, cela sera + équivalent à scroll +
              ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
            ``` diff --git a/files/fr/web/css/overflow-y/index.md b/files/fr/web/css/overflow-y/index.md index 7e389c001a8e80..76b04b2e109e21 100644 --- a/files/fr/web/css/overflow-y/index.md +++ b/files/fr/web/css/overflow-y/index.md @@ -62,27 +62,49 @@ Si [`overflow-x`](/fr/docs/Web/CSS/overflow-y) vaut `hidden`, `scroll` ou `auto` ```html
              -
            • overflow-y:hidden — cache le texte en dehors de la boîte -
              - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
            • + overflow-y:hidden — cache le texte en dehors de la boîte +
              + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur.
              • -
            • overflow-y:scroll — ajoute toujours un ascenseur -
              - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
            • + overflow-y:scroll — ajoute toujours un ascenseur +
              + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur.
              • -
            • overflow-y:visible — affiche le texte en dehors de la boîte si besoin -
              - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
            • + overflow-y:visible — affiche le texte en dehors de la boîte si + besoin +
              + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur.
              • -
            • overflow-y:auto — sur la plupart des navigateurs, cela sera équivalent à scroll -
              - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
            • + overflow-y:auto — sur la plupart des navigateurs, cela sera + équivalent à scroll +
              + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur.
            diff --git a/files/fr/web/css/overflow/index.md b/files/fr/web/css/overflow/index.md index 0fac036f698e88..efc5ae1239165e 100644 --- a/files/fr/web/css/overflow/index.md +++ b/files/fr/web/css/overflow/index.md @@ -79,33 +79,37 @@ La propriété `overflow` peut être définie grâce à un ou deux des mots-clé #### HTML ```html -
            - visible -

            - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. -

            -
            - -
            - hidden - -
            - -
            - scroll -

            - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. -

            -
            - -
            - auto -

            - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. -

            -
            +
            + visible +

            + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium + doloremque laudantium. +

            +
            + +
            + hidden + +
            + +
            + scroll +

            + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium + doloremque laudantium. +

            +
            + +
            + auto +

            + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium + doloremque laudantium. +

            +
            ``` #### CSS diff --git a/files/fr/web/css/padding-block-end/index.md b/files/fr/web/css/padding-block-end/index.md index 5179e81b07a8d5..8b13e2d551aa6c 100644 --- a/files/fr/web/css/padding-block-end/index.md +++ b/files/fr/web/css/padding-block-end/index.md @@ -22,7 +22,7 @@ padding-block-end: 1em; /* Valeurs de proportions */ /* Type */ -padding-block-end: 5%; /* Relatif à la largeur du bloc englobant */ +padding-block-end: 5%; /* Relatif à la largeur du bloc englobant */ /* Valeurs globales */ padding-block-end: inherit; @@ -64,7 +64,7 @@ div { .exemple { writing-mode: vertical-lr; padding-block-end: 20px; - background-color: #C8C800; + background-color: #c8c800; } ``` diff --git a/files/fr/web/css/padding-block-start/index.md b/files/fr/web/css/padding-block-start/index.md index 71d69fc5599081..377690d34dcf74 100644 --- a/files/fr/web/css/padding-block-start/index.md +++ b/files/fr/web/css/padding-block-start/index.md @@ -22,7 +22,7 @@ padding-block-start: 1em; /* Valeurs de proportions */ /* Type */ -padding-block-start: 5%; /* Relatif à la largeur du bloc englobant */ +padding-block-start: 5%; /* Relatif à la largeur du bloc englobant */ /* Valeurs globales */ padding-block-start: inherit; @@ -64,7 +64,7 @@ div { .exemple { writing-mode: vertical-lr; padding-block-start: 20px; - background-color: #C8C800; + background-color: #c8c800; } ``` diff --git a/files/fr/web/css/padding-block/index.md b/files/fr/web/css/padding-block/index.md index 7ac72d9f05255f..a056613a9ec006 100644 --- a/files/fr/web/css/padding-block/index.md +++ b/files/fr/web/css/padding-block/index.md @@ -11,10 +11,10 @@ La propriété **`padding-block`** définit l'espace de remplissage (_padding_) ```css /* Valeurs de longueur */ /* Type */ -padding-block: 10px 20px; /* Des longueurs absolues */ -padding-block: 1em 2em; /* Des longueurs relatives à la taille du texte */ -padding-block: 5% 2%; /* Des longueurs relatives à la taille du bloc englobant */ -padding-block: 10px; /* Une seule valeur définit le remplissage des deux côtés */ +padding-block: 10px 20px; /* Des longueurs absolues */ +padding-block: 1em 2em; /* Des longueurs relatives à la taille du texte */ +padding-block: 5% 2%; /* Des longueurs relatives à la taille du bloc englobant */ +padding-block: 10px; /* Une seule valeur définit le remplissage des deux côtés */ /* Valeurs avec un mot-clé */ padding-block: auto; diff --git a/files/fr/web/css/padding-bottom/index.md b/files/fr/web/css/padding-bottom/index.md index 0a2ed33fca8c57..399ae1ced6c456 100644 --- a/files/fr/web/css/padding-bottom/index.md +++ b/files/fr/web/css/padding-bottom/index.md @@ -52,10 +52,8 @@ padding-bottom: unset; ```html

            - Elle n’avait pas bu la moitié de la bouteille, - que sa tête touchait au plafond et qu’elle fut - forcée de se baisser pour ne pas se casser le - cou. + Elle n’avait pas bu la moitié de la bouteille, que sa tête touchait au plafond + et qu’elle fut forcée de se baisser pour ne pas se casser le cou.

            ``` diff --git a/files/fr/web/css/padding-inline-end/index.md b/files/fr/web/css/padding-inline-end/index.md index b41d527fc20876..9224e3bd2bf346 100644 --- a/files/fr/web/css/padding-inline-end/index.md +++ b/files/fr/web/css/padding-inline-end/index.md @@ -22,7 +22,7 @@ padding-inline-end: 1em; /* Valeurs de proportions */ /* Type */ -padding-inline-end: 5%; /* Relatif à la largeur du bloc englobant */ +padding-inline-end: 5%; /* Relatif à la largeur du bloc englobant */ /* Valeurs globales */ padding-inline-end: inherit; @@ -64,7 +64,7 @@ div { .exemple { writing-mode: vertical-lr; padding-inline-end: 20px; - background-color: #C8C800; + background-color: #c8c800; } ``` diff --git a/files/fr/web/css/padding-inline-start/index.md b/files/fr/web/css/padding-inline-start/index.md index 807656d15a6708..37949585dd84d9 100644 --- a/files/fr/web/css/padding-inline-start/index.md +++ b/files/fr/web/css/padding-inline-start/index.md @@ -16,11 +16,11 @@ La propriété **`padding-inline-start`** définit le décalage avec le début d /* Valeurs de longueur */ /* Type */ padding-inline-start: 10px; /* Une longueur absolue */ -padding-inline-start: 1em; /* Relatif à la taille du texte */ +padding-inline-start: 1em; /* Relatif à la taille du texte */ /* Valeurs de proportions */ /* Type */ -padding-inline-start: 5%; /* Relatif à la largeur du bloc englobant */ +padding-inline-start: 5%; /* Relatif à la largeur du bloc englobant */ /* Valeurs globales */ padding-inline-start: inherit; @@ -34,7 +34,7 @@ padding-inline-start: unset; - [``](/fr/docs/Web/CSS/length) - : La taille de la zone de remplissage exprimée de façon absolue. Les valeurs négatives sont interdites. - [``](/fr/docs/Web/CSS/percentage) - - : La taille de la zone de remplissage exprimée de façon relative à la *taille en ligne* (inline en anglais) du bloc englobant. Les valeurs négatives sont interdites. + - : La taille de la zone de remplissage exprimée de façon relative à la _taille en ligne_ (inline en anglais) du bloc englobant. Les valeurs négatives sont interdites. ## Description @@ -74,7 +74,7 @@ div { .exemple { writing-mode: vertical-lr; padding-inline-start: 20px; - background-color: #C8C800; + background-color: #c8c800; } ``` diff --git a/files/fr/web/css/padding-inline/index.md b/files/fr/web/css/padding-inline/index.md index d62281d66fb8e6..83e6f2c5b2e8c2 100644 --- a/files/fr/web/css/padding-inline/index.md +++ b/files/fr/web/css/padding-inline/index.md @@ -11,10 +11,10 @@ La propriété **`padding-inline`** définit l'espace de remplissage (_padding_) ```css /* Valeurs de longueur */ /* Type */ -padding-inline: 10px 20px; /* Des longueurs absolues */ -padding-inline: 1em 2em; /* Des longueurs relatives à la taille du texte */ -padding-inline: 5% 2%; /* Des longueurs relatives à la taille du bloc englobant */ -padding-inline: 10px; /* Une seule valeur définit le remplissage des deux côtés */ +padding-inline: 10px 20px; /* Des longueurs absolues */ +padding-inline: 1em 2em; /* Des longueurs relatives à la taille du texte */ +padding-inline: 5% 2%; /* Des longueurs relatives à la taille du bloc englobant */ +padding-inline: 10px; /* Une seule valeur définit le remplissage des deux côtés */ /* Valeurs avec un mot-clé */ padding-inline: auto; diff --git a/files/fr/web/css/padding-left/index.md b/files/fr/web/css/padding-left/index.md index b9cf96b6119d4c..5d3da661a740f0 100644 --- a/files/fr/web/css/padding-left/index.md +++ b/files/fr/web/css/padding-left/index.md @@ -52,10 +52,8 @@ padding-left: unset; ```html

            - Elle n’avait pas bu la moitié de la bouteille, - que sa tête touchait au plafond et qu’elle fut - forcée de se baisser pour ne pas se casser le - cou. + Elle n’avait pas bu la moitié de la bouteille, que sa tête touchait au plafond + et qu’elle fut forcée de se baisser pour ne pas se casser le cou.

            ``` diff --git a/files/fr/web/css/padding-right/index.md b/files/fr/web/css/padding-right/index.md index bd0ab5802071c7..357ac72f3e7f02 100644 --- a/files/fr/web/css/padding-right/index.md +++ b/files/fr/web/css/padding-right/index.md @@ -52,10 +52,8 @@ padding-right: unset; ```html

            - Elle n’avait pas bu la moitié de la bouteille, - que sa tête touchait au plafond et qu’elle fut - forcée de se baisser pour ne pas se casser le - cou. + Elle n’avait pas bu la moitié de la bouteille, que sa tête touchait au plafond + et qu’elle fut forcée de se baisser pour ne pas se casser le cou.

            ``` diff --git a/files/fr/web/css/padding-top/index.md b/files/fr/web/css/padding-top/index.md index f15d0eeed1e7a4..90ca3772aa5e8b 100644 --- a/files/fr/web/css/padding-top/index.md +++ b/files/fr/web/css/padding-top/index.md @@ -54,10 +54,8 @@ padding-top: unset; ```html

            - Elle n’avait pas bu la moitié de la bouteille, - que sa tête touchait au plafond et qu’elle fut - forcée de se baisser pour ne pas se casser le - cou. + Elle n’avait pas bu la moitié de la bouteille, que sa tête touchait au plafond + et qu’elle fut forcée de se baisser pour ne pas se casser le cou.

            ``` diff --git a/files/fr/web/css/page-break-before/index.md b/files/fr/web/css/page-break-before/index.md index c250fdfc95a4f4..b66a1c7dd57c07 100644 --- a/files/fr/web/css/page-break-before/index.md +++ b/files/fr/web/css/page-break-before/index.md @@ -73,7 +73,7 @@ Pour des raisons de compatibilité, si on traite `page-break-before` comme un sy /* Pour éviter d'avoir un saut de page avant */ /* une note dans un div */ div.note { - page-break-before: avoid; + page-break-before: avoid; } ``` diff --git a/files/fr/web/css/page-break-inside/index.md b/files/fr/web/css/page-break-inside/index.md index 2836360ed72d4d..af883104b9cb28 100644 --- a/files/fr/web/css/page-break-inside/index.md +++ b/files/fr/web/css/page-break-inside/index.md @@ -60,16 +60,18 @@ Pour des raisons de compatibilité, `page-break-inside` devrait être considér Une liste
            1. Un
              2. - +
            • Un
              • - +

            Un deuxième paragraphe.

            Un troisième paragraphe, un peu plus long.

            -

            Un quatrième paragraphe, un peu plus long voire plus long que le troisième.

            +

            + Un quatrième paragraphe, un peu plus long voire plus long que le troisième. +

``` @@ -84,7 +86,10 @@ Pour des raisons de compatibilité, `page-break-inside` devrait être considér column-width: 100px; } -.list, ol, ul, p { +.list, +ol, +ul, +p { break-inside: avoid; } @@ -92,7 +97,9 @@ p { background-color: #8ca0ff; } -ol, ul, .list { +ol, +ul, +.list { margin: 0.5em 0; display: block; background-color: orange; diff --git a/files/fr/web/css/perspective-origin/index.md b/files/fr/web/css/perspective-origin/index.md index 7400df4a74f281..bd6c3a91177330 100644 --- a/files/fr/web/css/perspective-origin/index.md +++ b/files/fr/web/css/perspective-origin/index.md @@ -337,7 +337,7 @@ perspective-origin: unset; /* On améliore la disposition */ section { - background-color: #EEE; + background-color: #eee; padding: 10px; font-family: sans-serif; text-align: left; diff --git a/files/fr/web/css/perspective/index.md b/files/fr/web/css/perspective/index.md index dd896c1a469dd3..e176cde715b952 100644 --- a/files/fr/web/css/perspective/index.md +++ b/files/fr/web/css/perspective/index.md @@ -58,10 +58,8 @@ perspective: unset; - - + + - - + +
perspective: 250px; - perspective: 350px; - perspective: 250px;perspective: 350px;
@@ -90,10 +88,8 @@ perspective: unset;
perspective: 500px; - perspective: 650px; - perspective: 500px;perspective: 650px;
@@ -130,86 +126,88 @@ perspective: unset; ```css /* Des classes pour les différentes valeurs */ .pers250 { - perspective: 250px; + perspective: 250px; } .pers350 { - perspective: 350px; + perspective: 350px; } .pers500 { - perspective: 500px; + perspective: 500px; } .pers650 { - perspective: 650px; + perspective: 650px; } /* On définit le div pour le conteneur, */ /* le cube, ainsi qu'une face générique */ - .container { - width: 200px; - height: 200px; - margin: 75px 0 0 75px; - border: none; +.container { + width: 200px; + height: 200px; + margin: 75px 0 0 75px; + border: none; } .cube { - width: 100%; - height: 100%; - backface-visibility: visible; - perspective-origin: 150% 150%; - transform-style: preserve-3d; + width: 100%; + height: 100%; + backface-visibility: visible; + perspective-origin: 150% 150%; + transform-style: preserve-3d; } .face { - display: block; - position: absolute; - width: 100px; - height: 100px; - border: none; - line-height: 100px; - font-family: sans-serif; - font-size: 60px; - color: white; - text-align: center; + display: block; + position: absolute; + width: 100px; + height: 100px; + border: none; + line-height: 100px; + font-family: sans-serif; + font-size: 60px; + color: white; + text-align: center; } /* On définit chaque face en fonction de sa direction */ - .front { - background: rgba(0, 0, 0, 0.3); - transform: translateZ(50px); +.front { + background: rgba(0, 0, 0, 0.3); + transform: translateZ(50px); } .back { - background: rgba(0, 255, 0, 1); - color: black; - transform: rotateY(180deg) translateZ(50px); + background: rgba(0, 255, 0, 1); + color: black; + transform: rotateY(180deg) translateZ(50px); } .right { - background: rgba(196, 0, 0, 0.7); - transform: rotateY(90deg) translateZ(50px); + background: rgba(196, 0, 0, 0.7); + transform: rotateY(90deg) translateZ(50px); } .left { - background: rgba(0, 0, 196, 0.7); - transform: rotateY(-90deg) translateZ(50px); + background: rgba(0, 0, 196, 0.7); + transform: rotateY(-90deg) translateZ(50px); } .top { - background: rgba(196, 196, 0, 0.7); - transform: rotateX(90deg) translateZ(50px); + background: rgba(196, 196, 0, 0.7); + transform: rotateX(90deg) translateZ(50px); } .bottom { - background: rgba(196, 0, 196, 0.7); - transform: rotateX(-90deg) translateZ(50px); + background: rgba(196, 0, 196, 0.7); + transform: rotateX(-90deg) translateZ(50px); } /* On améliore légèrement le tableau */ -th, p, td { - background-color: #EEEEEE; - padding: 10px; - font-family: sans-serif; - text-align: left; +th, +p, +td { + background-color: #eeeeee; + padding: 10px; + font-family: sans-serif; + text-align: left; } ``` diff --git a/files/fr/web/css/place-content/index.md b/files/fr/web/css/place-content/index.md index 68bc24d2bc6537..a26efac0671234 100644 --- a/files/fr/web/css/place-content/index.md +++ b/files/fr/web/css/place-content/index.md @@ -85,7 +85,7 @@ La première valeur utilisée sera celle qui correspond à {{cssxref("align-cont ```css #container { display: flex; - height:240px; + height: 240px; width: 240px; flex-wrap: wrap; background-color: #8c8c8c; @@ -116,27 +116,30 @@ div > div { ```html
Lorem
-
Lorem
ipsum
+
Lorem
ipsum
Lorem
-
Lorem
impsum
+
Lorem
impsum
``` ```html hidden -writing-mode: - -;
-direction:;
+direction:;
-place-content:;
+place-content:; + ; ``` ```js hidden var update = function () { - document.getElementById("container").style.placeContent = document.getElementById("alignContentAlignment").value + " " + document.getElementById("justifyContentAlignment").value; -} + document.getElementById("container").style.placeContent = + document.getElementById("alignContentAlignment").value + + " " + + document.getElementById("justifyContentAlignment").value; +}; var alignContentAlignment = document.getElementById("alignContentAlignment"); -alignContentAlignment.addEventListener("change", update); +alignContentAlignment.addEventListener("change", update); -var justifyContentAlignment = document.getElementById("justifyContentAlignment"); +var justifyContentAlignment = document.getElementById( + "justifyContentAlignment", +); justifyContentAlignment.addEventListener("change", update); var writingM = document.getElementById("writingMode"); writingM.addEventListener("change", function (evt) { - document.getElementById("container").style.writingMode = evt.target.value; + document.getElementById("container").style.writingMode = evt.target.value; }); var direction = document.getElementById("direction"); direction.addEventListener("change", function (evt) { - document.getElementById("container").style.direction = evt.target.value; + document.getElementById("container").style.direction = evt.target.value; }); ``` diff --git a/files/fr/web/css/place-items/index.md b/files/fr/web/css/place-items/index.md index fb5325852e202f..a904c45ac1719c 100644 --- a/files/fr/web/css/place-items/index.md +++ b/files/fr/web/css/place-items/index.md @@ -91,7 +91,7 @@ place-items: unset; ```css #container { - height:200px; + height: 200px; width: 240px; place-items: center; /* Cette valeur peut être modifiée dans l'exemple */ background-color: #8c8c8c; @@ -204,15 +204,15 @@ select { ``` ```js hidden -var values = document.getElementById('values'); -var display = document.getElementById('display'); -var container = document.getElementById('container'); +var values = document.getElementById("values"); +var display = document.getElementById("display"); +var container = document.getElementById("container"); -values.addEventListener('change', function (evt) { +values.addEventListener("change", function (evt) { container.style.placeItems = evt.target.value; }); -display.addEventListener('change', function (evt) { +display.addEventListener("change", function (evt) { container.className = evt.target.value; }); ``` diff --git a/files/fr/web/css/pointer-events/index.md b/files/fr/web/css/pointer-events/index.md index cae8f492becb80..0b384aeb96cecb 100644 --- a/files/fr/web/css/pointer-events/index.md +++ b/files/fr/web/css/pointer-events/index.md @@ -17,13 +17,13 @@ La propriété [CSS](/fr/docs/Web/CSS) **`pointer-events`** permet de contrôler pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; /* SVG uniquement */ -pointer-events: visibleFill; /* SVG uniquement */ -pointer-events: visibleStroke; /* SVG uniquement */ -pointer-events: visible; /* SVG uniquement */ -pointer-events: painted; /* SVG uniquement */ -pointer-events: fill; /* SVG uniquement */ -pointer-events: stroke; /* SVG uniquement */ -pointer-events: all; /* SVG uniquement */ +pointer-events: visibleFill; /* SVG uniquement */ +pointer-events: visibleStroke; /* SVG uniquement */ +pointer-events: visible; /* SVG uniquement */ +pointer-events: painted; /* SVG uniquement */ +pointer-events: fill; /* SVG uniquement */ +pointer-events: stroke; /* SVG uniquement */ +pointer-events: all; /* SVG uniquement */ /* Valeurs globales */ pointer-events: inherit; @@ -66,7 +66,7 @@ Lorsque cette propriété n'est pas définie pour le contenu SVG, on aura le mê Lorsqu'on utilise la valeur `none`, cela indique que l'élément ne peut pas recevoir d'événement de pointeur mais également qu'on peut passer « au travers » de l'élément pour atteindre des contrôles qui pourraient être « en dessous/derrière ». -L'utilisation de `pointer-events` peut empêcher que des événements soient directement déclenchés sur l'élément avec les pointeurs. Cela *ne signifie en aucun cas* que les gestionnaires d'événement de cet élément ne pourront pas être déclenchés ! Si l'un des éléments descendants possède une valeur explicite de `pointer-events` qui lui *permet* de recevoir des événements de pointeur, les événements qui parcourent les ancêtres pourront déclencher les gestionnaires d'événements associés. Bien entendu, tout pointage qui a lieu sur un endroit de l'écran qui est couvert par le parent, mais pas par l'élément descendant, ne déclenchera pas d'événement. L'événement passera « au travers » du parent et ciblera le contenu qui est en dessous. +L'utilisation de `pointer-events` peut empêcher que des événements soient directement déclenchés sur l'élément avec les pointeurs. Cela _ne signifie en aucun cas_ que les gestionnaires d'événement de cet élément ne pourront pas être déclenchés ! Si l'un des éléments descendants possède une valeur explicite de `pointer-events` qui lui _permet_ de recevoir des événements de pointeur, les événements qui parcourent les ancêtres pourront déclencher les gestionnaires d'événements associés. Bien entendu, tout pointage qui a lieu sur un endroit de l'écran qui est couvert par le parent, mais pas par l'élément descendant, ne déclenchera pas d'événement. L'événement passera « au travers » du parent et ciblera le contenu qui est en dessous. Les éléments avec `pointer-events: none` continueront de recevoir le focus via la navigation au clavier avec la touche Tab. diff --git a/files/fr/web/css/position/index.md b/files/fr/web/css/position/index.md index a0dc37ce5e2570..907268cdb84f46 100644 --- a/files/fr/web/css/position/index.md +++ b/files/fr/web/css/position/index.md @@ -29,24 +29,29 @@ position: unset; ### Valeurs - `static` + - : Comportement normal (par défaut). L'élément est alors positionné dans le flux avec sa position. Les propriétés [`top`](/fr/docs/Web/CSS/top), [`right`](/fr/docs/Web/CSS/right), [`bottom`](/fr/docs/Web/CSS/bottom), [`left`](/fr/docs/Web/CSS/left) et [`z-index`](/fr/docs/Web/CSS/z-index) ne s'appliquent pas. - `relative` + - : L'élément est positionné dans le flux normal du document puis décalé, par rapport à lui-même, selon les valeurs fournies par `top`, `right`, `bottom` et `left`. Le décalage n'a pas d'impact sur la position des éléments. Aussi, l'espace fourni à l'élément sur la page est le même que celui fourni avec `static`. Cette valeur crée un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context) lorsque `z-index` ne vaut pas `auto`. L'effet de cette valeur n'est pas défini pour les éléments `table-*-group`, `table-row`, `table-column`, `table-cell` et `table-caption`. - `absolute` + - : L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial sinon. La position finale de l'élément est déterminée par les valeurs de `top`, `right`, `bottom` et `left`. Cette valeur crée un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context) lorsque `z-index` ne vaut pas `auto`. Les éléments positionnés de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges. - `fixed` + - : L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (viewport), sauf si un des ancêtres a une propriété [`transform`](/fr/docs/Web/CSS/transform), [`perspective`](/fr/docs/Web/CSS/perspective) ou [`filter`](/fr/docs/Web/CSS/filter) qui est différente de `none` (voir [la spécification sur les transformations CSS](https://www.w3.org/TR/css-transforms-1/#propdef-transform)) ; dans ce cas, c'est l'élément ancêtre qui joue le rôle de bloc englobant. Cela empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour _chaque page_). Cette valeur crée toujours un nouveau contexte d'empilement. Certaines incohérences existent entre les navigateurs quant au rôle de `perspective` et `filter` pour la définition du bloc englobant. La valeur finale de l'élément est déterminée par les valeurs de `top`, `right`, `bottom` et `left`. Cette valeur crée toujours un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context). Pour les documents imprimés, cela se traduit par le placement de l'élément au même endroit pour _chacune des pages_. - `sticky` + - : La position de la boîte est calculée en fonction du flux normal du document. Ensuite, la boîte est décalée par rapport à son ancêtre de défilement le plus proche et par rapport à [son bloc englobant](/fr/docs/Web/CSS/Containing_block) selon les valeurs de `top`, `right`, `bottom` et `left`. Dans tous les cas, y compris avec les éléments `table`, cela n'affecte pas la position des autres éléments. Cette valeur entraîne toujours la création d'un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context). On notera qu'un tel élément « adhèrera » à l'ancêtre le plus proche qui dispose d'un mécanisme de défilement (c'est-à-dire quand `overflow` vaut `hidden`, `scroll`, `auto` ou `overlay`) même si cet ancêtre n'est pas nécessairement l'ancêtre de défilement le plus proche : cette valeur ne fonctionnera pas dans un élément pour lequel la propriété vaut `overflow: hidden` ou `auto` ([cf. cette _issue_ GitHub](https://github.com/w3c/csswg-drafts/issues/865)). @@ -139,12 +144,27 @@ Dans l'exemple qui suit, on n'a pas d'ancêtre positionné et la boîte «  ```html

Positionnement absolu

-

Un élément de bloc simple. Les éléments de bloc adjacents sont sur de nouvelles lignes en dessous.

- -

Par défaut, on occupe 100% de la largeur de l'élément parent et on est aussi grand que notre contenu.

-

Nous sommes séparés par nos marges (une seule marge en raison de la fusion des marges).

- -

Les éléments en ligne (inline) comme celui-ci et celui-là se situent sur la même ligne avec également les nœuds texte. S'il y a de l'espace sur la même ligne. Les éléments qui dépassent passent à la ligne si possible — comme pour ce texte. ou cette image

+

+ Un élément de bloc simple. Les éléments de bloc adjacents sont sur de + nouvelles lignes en dessous. +

+ +

+ Par défaut, on occupe 100% de la largeur de l'élément parent et on est aussi + grand que notre contenu. +

+

+ Nous sommes séparés par nos marges (une seule marge en raison de la fusion des + marges). +

+ +

+ Les éléments en ligne (inline) comme celui-ci et + celui-là se situent sur la même ligne avec également les nœuds + texte. S'il y a de l'espace sur la même ligne. Les éléments qui dépassent + passent à la ligne si possible — comme pour ce texte. ou cette + image +

``` #### CSS @@ -192,22 +212,30 @@ Le positionnement fixe est semblable au positionnement absolu sauf qu'ici, le bl ```html

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. - Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. - Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. - Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. - Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. - Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. - Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor + eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, + laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. + Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut + arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam + sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem + aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id + maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam + finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id + ultrices ultrices, tempor et tellus.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis. - Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue. - Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. - Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi. - Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor. - Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum. - Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor + eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi, + laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit. + Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut + arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam + sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem + aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id + maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam + finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id + ultrices ultrices, tempor et tellus.

Un
@@ -308,16 +336,19 @@ Il faut définir un seuil avec au moins [`top`](/fr/docs/Web/CSS/top) ou [`right } dl > div { - background: #FFF; + background: #fff; padding: 24px 0 0 0; } dt { - background: #B8C1C8; - border-bottom: 1px solid #989EA4; - border-top: 1px solid #717D85; - color: #FFF; - font: bold 18px/21px Helvetica, Arial, sans-serif; + background: #b8c1c8; + border-bottom: 1px solid #989ea4; + border-top: 1px solid #717d85; + color: #fff; + font: + bold 18px/21px Helvetica, + Arial, + sans-serif; margin: 0; padding: 2px 0 0 12px; position: -webkit-sticky; @@ -326,14 +357,17 @@ dt { } dd { - font: bold 20px/45px Helvetica, Arial, sans-serif; + font: + bold 20px/45px Helvetica, + Arial, + sans-serif; margin: 0; padding: 0 0 0 12px; white-space: nowrap; } dd + dd { - border-top: 1px solid #CCC; + border-top: 1px solid #ccc; } ``` diff --git a/files/fr/web/css/position_value/index.md b/files/fr/web/css/position_value/index.md index 0fafcd768aefd0..6cd0808863afc7 100644 --- a/files/fr/web/css/position_value/index.md +++ b/files/fr/web/css/position_value/index.md @@ -96,5 +96,5 @@ bottom top - [Valeurs et unités en CSS](/fr/docs/Web/CSS/CSS_Values_and_Units) - [Tutoriel — Introduction aux valeurs et unités CSS](/fr/docs/Learn/CSS/Building_blocks/Values_and_units) - [`background-position`](/fr/docs/Web/CSS/background-position) -- [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient()) -- [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient()) +- [`radial-gradient()`]() +- [`conic-gradient()`]() diff --git a/files/fr/web/css/print-color-adjust/index.md b/files/fr/web/css/print-color-adjust/index.md index 4c228638f21c50..ad5b2055086fd4 100644 --- a/files/fr/web/css/print-color-adjust/index.md +++ b/files/fr/web/css/print-color-adjust/index.md @@ -60,12 +60,17 @@ Dans cet exemple, on a une boîte qui utilise [`background-image`](/fr/docs/Web/ ```css .ma-boite { background-color: black; - background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5)); + background-image: linear-gradient( + rgba(0, 0, 180, 0.5), + rgba(70, 140, 220, 0.5) + ); color: #900; width: 15rem; height: 6rem; text-align: center; - font: 24px "Helvetica", sans-serif; + font: + 24px "Helvetica", + sans-serif; display: flex; align-items: center; justify-content: center; diff --git a/files/fr/web/css/privacy_and_the__colon_visited_selector/index.md b/files/fr/web/css/privacy_and_the__colon_visited_selector/index.md index 513f51190b182c..dce4715cdb367a 100644 --- a/files/fr/web/css/privacy_and_the__colon_visited_selector/index.md +++ b/files/fr/web/css/privacy_and_the__colon_visited_selector/index.md @@ -43,9 +43,9 @@ Voici un exemple de mise en forme prenant en compte ces restrictions : } :visited { - outline-color: orange; /* Les liens visités auront un contour orange */ - color: yellow; /* Le texte des liens visités sera en jaune */ - background-color: green; /* L'arrière-plan des liens visités sera vert */ + outline-color: orange; /* Les liens visités auront un contour orange */ + color: yellow; /* Le texte des liens visités sera en jaune */ + background-color: green; /* L'arrière-plan des liens visités sera vert */ } ``` diff --git a/files/fr/web/css/pseudo-classes/index.md b/files/fr/web/css/pseudo-classes/index.md index 09317ceabcc839..1347461a8a335e 100644 --- a/files/fr/web/css/pseudo-classes/index.md +++ b/files/fr/web/css/pseudo-classes/index.md @@ -10,7 +10,7 @@ Une **pseudo-classe** est un mot-clé qui peut être ajouté à un sélecteur af ```css div:hover { - background-color: #F89B4D; + background-color: #f89b4d; } ``` @@ -100,7 +100,7 @@ sélecteur:pseudo-classe { background-color: palegreen; } -p:nth-child(2n+1) { +p:nth-child(2n + 1) { background-color: lime; } ``` @@ -110,19 +110,17 @@ p:nth-child(2n+1) { ```html

- La Reine devint pourpre de colère ; et après - l’avoir considérée un moment avec des yeux - flamboyants comme ceux d’une bête fauve, elle - se mit à crier : « Qu’on lui coupe la tête ! » + La Reine devint pourpre de colère ; et après l’avoir considérée un + moment avec des yeux flamboyants comme ceux d’une bête fauve, elle se mit à + crier : « Qu’on lui coupe la tête ! »

- « Quelle idée ! » dit Alice très-haut et d’un - ton décidé. La Reine se tut. + « Quelle idée ! » dit Alice très-haut et d’un ton décidé. La + Reine se tut.

- Le Roi lui posa la main sur le bras, et lui - dit timidement : « Considérez donc, ma chère - amie, que ce n’est qu’une enfant. » + Le Roi lui posa la main sur le bras, et lui dit timidement : + « Considérez donc, ma chère amie, que ce n’est qu’une enfant. »

``` diff --git a/files/fr/web/css/pseudo-elements/index.md b/files/fr/web/css/pseudo-elements/index.md index e8cc5bcabade70..5a2df0adc923e9 100644 --- a/files/fr/web/css/pseudo-elements/index.md +++ b/files/fr/web/css/pseudo-elements/index.md @@ -60,17 +60,14 @@ p::first-line { ```html

- C’était le Lapin Blanc qui revenait en trottinant, - et qui cherchait de tous côtés, d’un air inquiet, - comme s’il avait perdu quelque chose ; Alice - l’entendit qui marmottait : « La Duchesse ! La - Duchesse ! Oh ! mes pauvres pattes ; oh ! ma robe - et mes moustaches ! Elle me fera guillotiner aussi - vrai que des furets sont des furets ! Où pourrais-je - bien les avoir perdus ? » Alice devina tout de suite - qu’il cherchait l’éventail et la paire de gants paille, - et, comme elle avait bon cœur, elle se mit à les - chercher aussi ; mais pas moyen de les trouver. + C’était le Lapin Blanc qui revenait en trottinant, et qui cherchait de tous + côtés, d’un air inquiet, comme s’il avait perdu quelque chose ; Alice + l’entendit qui marmottait : « La Duchesse ! La Duchesse ! Oh ! mes pauvres + pattes ; oh ! ma robe et mes moustaches ! Elle me fera guillotiner aussi vrai + que des furets sont des furets ! Où pourrais-je bien les avoir perdus ? » + Alice devina tout de suite qu’il cherchait l’éventail et la paire de gants + paille, et, comme elle avait bon cœur, elle se mit à les chercher aussi ; mais + pas moyen de les trouver.

``` diff --git a/files/fr/web/css/quotes/index.md b/files/fr/web/css/quotes/index.md index 6dc399f14b18ed..19fd7b6be51b13 100644 --- a/files/fr/web/css/quotes/index.md +++ b/files/fr/web/css/quotes/index.md @@ -16,9 +16,9 @@ quotes: none; /* Chaînes de caractères */ /* Type */ -quotes: "«" "»"; /* On utilise les guillemets français +quotes: "«" "»"; /* On utilise les guillemets français pour ouvrir et fermer une citation */ -quotes: "«" "»" "‹" "›"; /* On définit deux niveaux de citation */ +quotes: "«" "»" "‹" "›"; /* On définit deux niveaux de citation */ /* Valeurs globales */ quotes: inherit; @@ -47,11 +47,12 @@ quotes: unset; ```html

- Bientôt le Lapin aperçut Alice qui furetait ; - il lui cria d’un ton d’impatience : - Eh bien ! Marianne, que faites-vous ici ? - Courez vite à la maison me chercher une paire - de gants et un éventail ! Allons, dépêchons-nous. + Bientôt le Lapin aperçut Alice qui furetait ; il lui cria d’un ton + d’impatience : + Eh bien ! Marianne, que faites-vous ici ? Courez vite à la maison me + chercher une paire de gants et un éventail ! Allons, dépêchons-nous.

@@ -61,7 +62,7 @@ quotes: unset; ```css q { - quotes : "«" "»" '"' '"'; + quotes: "«" "»" '"' '"'; } ``` diff --git a/files/fr/web/css/repeat/index.md b/files/fr/web/css/repeat/index.md index 252bbaba2245ce..fb5f960c3195e3 100644 --- a/files/fr/web/css/repeat/index.md +++ b/files/fr/web/css/repeat/index.md @@ -97,21 +97,11 @@ repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) ```html
-
- Un élément qui mesure 50 pixels de large. -
-
- Un élément avec une largeur flexible. -
-
- Un élément qui mesure 50 pixels de large. -
-
- Un élément avec une largeur flexible. -
-
- Un élément non-flexible qui mesure 100 pixels de large. -
+
Un élément qui mesure 50 pixels de large.
+
Un élément avec une largeur flexible.
+
Un élément qui mesure 50 pixels de large.
+
Un élément avec une largeur flexible.
+
Un élément non-flexible qui mesure 100 pixels de large.
``` diff --git a/files/fr/web/css/resize/index.md b/files/fr/web/css/resize/index.md index d1c5242b7ba002..6ecba69696813a 100644 --- a/files/fr/web/css/resize/index.md +++ b/files/fr/web/css/resize/index.md @@ -107,8 +107,8 @@ p { ```html

- Ce paragraphe peut être redimensionné car la propriété - CSS resize vaut 'both' sur cet élément. + Ce paragraphe peut être redimensionné car la propriété CSS resize vaut + 'both' sur cet élément.

``` diff --git a/files/fr/web/css/resolution/index.md b/files/fr/web/css/resolution/index.md index 3b98e28b52f645..d6426ddb09316e 100644 --- a/files/fr/web/css/resolution/index.md +++ b/files/fr/web/css/resolution/index.md @@ -72,9 +72,8 @@ ten dpi Incorrect : seules des expressions numériques sont acceptées. ```html

- À ces mots le Chapelier ouvrit de grands yeux ; mais - il se contenta de dire : « Pourquoi une pie - ressemble-t-elle à un pupitre ? » + À ces mots le Chapelier ouvrit de grands yeux ; mais il se contenta de dire : + « Pourquoi une pie ressemble-t-elle à un pupitre ? »

``` diff --git a/files/fr/web/css/revert/index.md b/files/fr/web/css/revert/index.md index e98deda35ae968..2e9beefc670189 100644 --- a/files/fr/web/css/revert/index.md +++ b/files/fr/web/css/revert/index.md @@ -79,16 +79,11 @@ h3 {

Ceci aura toujours font-weight: normal mais color: black

-

- Juste un peu de texte -

+

Juste un peu de texte

- Ceci devrait avoir font-weight: bold (la valeur originale) - et color: black + Ceci devrait avoir font-weight: bold (la valeur originale) et color: black

-

- Juste un peu de texte -

+

Juste un peu de texte

``` #### Résultat @@ -112,18 +107,12 @@ h3 { #### HTML ```html -

- Un style spécifique -

-

- Juste un peu de texte -

+

Un style spécifique

+

Juste un peu de texte

Retour aux réglages par défaut pour toutes les propriétés

-

- Juste un peu de texte -

+

Juste un peu de texte

``` #### Résultat diff --git a/files/fr/web/css/right/index.md b/files/fr/web/css/right/index.md index 5d9b5aa4dc2e71..e7f687898e79d1 100644 --- a/files/fr/web/css/right/index.md +++ b/files/fr/web/css/right/index.md @@ -77,7 +77,7 @@ right: unset; #exemple_3 { width: 100px; height: 100px; - background-color: #FFC7E4; + background-color: #ffc7e4; position: relative; top: 20px; left: 20px; @@ -86,7 +86,7 @@ right: unset; #exemple_4 { width: 100px; height: 100px; - background-color: #FFD7C2; + background-color: #ffd7c2; position: absolute; bottom: 10px; right: 20px; diff --git a/files/fr/web/css/ruby-position/index.md b/files/fr/web/css/ruby-position/index.md index 225cc69c132ff6..fd735372e952c5 100644 --- a/files/fr/web/css/ruby-position/index.md +++ b/files/fr/web/css/ruby-position/index.md @@ -61,7 +61,7 @@ Ce fragment HTML rendra un résultat différent pour chaque valeur de `ruby-posi ```css ruby { - ruby-position:over; + ruby-position: over; } ``` @@ -80,7 +80,7 @@ On obtiendra le résultat suivant : ```css ruby { - ruby-position:under; + ruby-position: under; } ``` diff --git a/files/fr/web/css/scroll-behavior/index.md b/files/fr/web/css/scroll-behavior/index.md index 8a3f4d3bb070df..df3d697c5b390c 100644 --- a/files/fr/web/css/scroll-behavior/index.md +++ b/files/fr/web/css/scroll-behavior/index.md @@ -10,7 +10,7 @@ La propriété **`scroll-behavior`** définit le comportement du défilement pou {{EmbedInteractiveExample("pages/css/scroll-behavior.html")}} -Pour les autres défilements, tels que ceux appliqués par l'utilisateur, cette propriété n'a aucun impact. Lorsque cette propriété est définie sur l'élément racine, elle s'applique à la zone d'affichage (viewport). Lorsque cette propriété est indiquée sur l'élément `body`, elle *ne se propage pas* à la zone d'affichage (viewport). +Pour les autres défilements, tels que ceux appliqués par l'utilisateur, cette propriété n'a aucun impact. Lorsque cette propriété est définie sur l'élément racine, elle s'applique à la zone d'affichage (viewport). Lorsque cette propriété est indiquée sur l'élément `body`, elle _ne se propage pas_ à la zone d'affichage (viewport). Les agents utilisateur peuvent choisir d'ignorer cette propriété. @@ -73,7 +73,8 @@ a { text-decoration: none; } -nav, .scroll-container { +nav, +.scroll-container { display: block; margin: 0 auto; text-align: center; diff --git a/files/fr/web/css/scroll-margin-block/index.md b/files/fr/web/css/scroll-margin-block/index.md index efc94d7840377c..79940e509ad44d 100644 --- a/files/fr/web/css/scroll-margin-block/index.md +++ b/files/fr/web/css/scroll-margin-block/index.md @@ -18,7 +18,7 @@ Les valeurs des marges de défilement correspondent aux décalages entre la zone /* Valeurs de longueur */ /* Type */ scroll-margin-block: 10px; -scroll-margin-block: 1em .5em; +scroll-margin-block: 1em 0.5em; /* Valeurs globales */ scroll-margin-block: inherit; diff --git a/files/fr/web/css/scroll-margin-inline/index.md b/files/fr/web/css/scroll-margin-inline/index.md index 40d8f2243bd7b1..56c208a58830e4 100644 --- a/files/fr/web/css/scroll-margin-inline/index.md +++ b/files/fr/web/css/scroll-margin-inline/index.md @@ -16,7 +16,7 @@ Les valeurs des marges de défilement correspondent aux décalages entre la zone /* Valeurs de longueur */ /* Type */ scroll-margin-inline: 10px; -scroll-margin-inline: 1em .5em; +scroll-margin-inline: 1em 0.5em; /* Valeurs globales */ scroll-margin-inline: inherit; diff --git a/files/fr/web/css/scroll-margin/index.md b/files/fr/web/css/scroll-margin/index.md index a986d52dccde16..6e42757af2097d 100644 --- a/files/fr/web/css/scroll-margin/index.md +++ b/files/fr/web/css/scroll-margin/index.md @@ -18,7 +18,7 @@ Les valeurs de `scroll-margin` correspondent aux décalages entre la zone qui es /* Valeur de longueur */ /* Type */ scroll-margin: 10px; -scroll-margin: 1em .5em 1em 1em; +scroll-margin: 1em 0.5em 1em 1em; /* Valeurs globales */ scroll-margin: inherit; diff --git a/files/fr/web/css/scroll-padding-block/index.md b/files/fr/web/css/scroll-padding-block/index.md index 147608401ce355..0085e99038b65f 100644 --- a/files/fr/web/css/scroll-padding-block/index.md +++ b/files/fr/web/css/scroll-padding-block/index.md @@ -21,7 +21,7 @@ scroll-padding-block: auto; /* Valeurs de longueur */ /* Type */ scroll-padding-block: 10px; -scroll-padding-block: 1em .5em; +scroll-padding-block: 1em 0.5em; scroll-padding-block: 10%; /* Valeurs globales */ diff --git a/files/fr/web/css/scroll-padding-inline/index.md b/files/fr/web/css/scroll-padding-inline/index.md index 9518d3132d1971..c9c60f1edf1b9e 100644 --- a/files/fr/web/css/scroll-padding-inline/index.md +++ b/files/fr/web/css/scroll-padding-inline/index.md @@ -21,7 +21,7 @@ scroll-padding-inline: auto; /* Valeurs de longueur */ /* Type */ scroll-padding-inline: 10px; -scroll-padding-inline: 1em .5em; +scroll-padding-inline: 1em 0.5em; scroll-padding-inline: 10%; /* Valeurs globales */ diff --git a/files/fr/web/css/scroll-padding/index.md b/files/fr/web/css/scroll-padding/index.md index 98b0e41e13c46c..8d09ac7c939b22 100644 --- a/files/fr/web/css/scroll-padding/index.md +++ b/files/fr/web/css/scroll-padding/index.md @@ -21,7 +21,7 @@ scroll-padding: auto; /* Valeurs de longueur */ /* Type */ scroll-padding: 10px; -scroll-padding: 1em .5em 1em 1em; +scroll-padding: 1em 0.5em 1em 1em; scroll-padding: 10%; /* Valeurs globales */ diff --git a/files/fr/web/css/scroll-snap-stop/index.md b/files/fr/web/css/scroll-snap-stop/index.md index ce8381661b4b50..0d3d112c7d71d0 100644 --- a/files/fr/web/css/scroll-snap-stop/index.md +++ b/files/fr/web/css/scroll-snap-stop/index.md @@ -42,7 +42,8 @@ scroll-snap-type: unset; ```css /* setup */ -:root, body { +:root, +body { height: 100%; display: flex; align-items: center; @@ -118,11 +119,11 @@ scroll-snap-type: unset; } /* coloration */ .container > div:nth-child(even) { - background-color: #87EA87; + background-color: #87ea87; } .container > div:nth-child(odd) { - background-color: #87CCEA; + background-color: #87ccea; } ``` @@ -130,7 +131,7 @@ scroll-snap-type: unset; ```html
-
X Mand. LTR
+
X Mand. LTR
2
3
4
diff --git a/files/fr/web/css/scroll-snap-type/index.md b/files/fr/web/css/scroll-snap-type/index.md index 3c701aaca3af20..c0cd248d11a637 100644 --- a/files/fr/web/css/scroll-snap-type/index.md +++ b/files/fr/web/css/scroll-snap-type/index.md @@ -68,7 +68,9 @@ scroll-snap-type: unset; ```css /* setup */ -html, body, .holster { +html, +body, +.holster { height: 100%; } .holster { @@ -140,11 +142,11 @@ html, body, .holster { } /* coloration */ .container > div:nth-child(even) { - background-color: #87EA87; + background-color: #87ea87; } .container > div:nth-child(odd) { - background-color: #87CCEA; + background-color: #87ccea; } ``` @@ -152,69 +154,69 @@ html, body, .holster { ```html
-
-
X Mand. LTR
-
2
-
3
-
4
-
5
-
- -
-
X Prox. LTR
-
2
-
3
-
4
-
5
-
- -
-
Y Mand. LTR
-
2
-
3
-
4
-
5
-
- -
-
Y Prox. LTR
-
2
-
3
-
4
-
5
-
- -
-
X Mand. RTL
-
2
-
3
-
4
-
5
-
- -
-
X Prox. RTL
-
2
-
3
-
4
-
5
-
- -
-
Y Mand. RTL
-
2
-
3
-
4
-
5
-
- -
-
Y Prox. RTL
-
2
-
3
-
4
-
5
-
+
+
X Mand. LTR
+
2
+
3
+
4
+
5
+
+ +
+
X Prox. LTR
+
2
+
3
+
4
+
5
+
+ +
+
Y Mand. LTR
+
2
+
3
+
4
+
5
+
+ +
+
Y Prox. LTR
+
2
+
3
+
4
+
5
+
+ +
+
X Mand. RTL
+
2
+
3
+
4
+
5
+
+ +
+
X Prox. RTL
+
2
+
3
+
4
+
5
+
+ +
+
Y Mand. RTL
+
2
+
3
+
4
+
5
+
+ +
+
Y Prox. RTL
+
2
+
3
+
4
+
5
+
``` diff --git a/files/fr/web/css/scroll-timeline/index.md b/files/fr/web/css/scroll-timeline/index.md index 2c2959131a0197..c2598f5bd961cc 100644 --- a/files/fr/web/css/scroll-timeline/index.md +++ b/files/fr/web/css/scroll-timeline/index.md @@ -1,5 +1,5 @@ --- -title: '@scroll-timeline' +title: "@scroll-timeline" slug: Web/CSS/scroll-timeline l10n: sourceCommit: 3db79652f43f0d5b4bd3bc0f233ed7670d91cbdf diff --git a/files/fr/web/css/scrollbar-color/index.md b/files/fr/web/css/scrollbar-color/index.md index 577dcb6f169d8c..787f0b4a9b76d6 100644 --- a/files/fr/web/css/scrollbar-color/index.md +++ b/files/fr/web/css/scrollbar-color/index.md @@ -101,7 +101,13 @@ scrollbar-color: unset; ### HTML ```html -
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
+
+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens + corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts + fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber + earthnut pea peanut soko zucchini. +
``` ### Résultat diff --git a/files/fr/web/css/scrollbar-width/index.md b/files/fr/web/css/scrollbar-width/index.md index f95ed4ca5b42d7..1b736fe3c35cb9 100644 --- a/files/fr/web/css/scrollbar-width/index.md +++ b/files/fr/web/css/scrollbar-width/index.md @@ -86,7 +86,13 @@ scrollbar-width: unset; ### HTML ```html -
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
+
+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens + corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts + fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber + earthnut pea peanut soko zucchini. +
``` ### Résultat diff --git a/files/fr/web/css/selector_list/index.md b/files/fr/web/css/selector_list/index.md index 001eeaf6e3dbe5..627cb3057a0d0d 100644 --- a/files/fr/web/css/selector_list/index.md +++ b/files/fr/web/css/selector_list/index.md @@ -31,7 +31,14 @@ element, element, element { propriétés de style } On peut grouper les sélecteurs sur une seule ligne : ```css -h1, h2, h3, h4, h5, h6 { font-family: helvetica; } +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: helvetica; +} ``` ### Groupement sur plusieurs lignes @@ -51,13 +58,23 @@ article { Un inconvénient des listes de sélecteurs est la non-équivalence des deux blocs suivants : ```css -h1 { font-family: sans-serif } -h2:maybe-unsupported { font-family: sans-serif } -h3 { font-family: sans-serif } +h1 { + font-family: sans-serif; +} +h2:maybe-unsupported { + font-family: sans-serif; +} +h3 { + font-family: sans-serif; +} ``` ```css -h1, h2:maybe-unsupported, h3 { font-family: sans-serif } +h1, +h2:maybe-unsupported, +h3 { + font-family: sans-serif; +} ``` En effet, un seul sélecteur vous manque et tout est dépeuplé. Enfin, un seul sélecteur invalide rend l'ensemble de la règle invalide. @@ -65,13 +82,21 @@ En effet, un seul sélecteur vous manque et tout est dépeuplé. Enfin, un seul Pour éviter cet effet indésirable, on pourra utiliser le sélecteur {{CSSxRef(":is", ":is()")}} qui ignore les sélecteurs invalides parmi ses arguments. Par contre, tous les sélecteurs passés en arguments auront la même spécificité. ```css -h1 { font-family: sans-serif } -h2:maybe-unsupported { font-family: sans-serif } -h3 { font-family: sans-serif } +h1 { + font-family: sans-serif; +} +h2:maybe-unsupported { + font-family: sans-serif; +} +h3 { + font-family: sans-serif; +} ``` ```css -:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif } +:is(h1, h2:maybe-unsupported, h3) { + font-family: sans-serif; +} ``` ## Spécifications diff --git a/files/fr/web/css/shape-image-threshold/index.md b/files/fr/web/css/shape-image-threshold/index.md index c6da950a3ca825..85f4d342f284b1 100644 --- a/files/fr/web/css/shape-image-threshold/index.md +++ b/files/fr/web/css/shape-image-threshold/index.md @@ -49,10 +49,8 @@ Dans cet exemple, on utilise un bloc {{HTMLElement("div")}} pour y afficher une width: 150px; height: 150px; float: left; - background-image: linear-gradient(30deg, black, transparent 80%, - transparent); - shape-outside: linear-gradient(30deg, black, transparent 80%, - transparent); + background-image: linear-gradient(30deg, black, transparent 80%, transparent); + shape-outside: linear-gradient(30deg, black, transparent 80%, transparent); shape-image-threshold: 0.2; } ``` @@ -65,14 +63,14 @@ Dans cet exemple, on utilise un bloc {{HTMLElement("div")}} pour y afficher une

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint - facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat - adipisci, libero quae nihil porro debitis laboriosam inventore animi - impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque - a mollitia dicta repudiandae illum exercitationem aliquam repellendus - ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto - nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit - accusamus iusto dolore, at provident eius alias maxime pariatur non - deleniti ipsum sequi rem eveniet laboriosam magni expedita? + facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat adipisci, + libero quae nihil porro debitis laboriosam inventore animi impedit nostrum + nesciunt quisquam expedita! Dolores consectetur iure atque a mollitia dicta + repudiandae illum exercitationem aliquam repellendus ipsum porro modi, id nemo + eligendi, architecto ratione quibusdam iusto nisi soluta? Totam inventore ea + eum sed velit et eligendi suscipit accusamus iusto dolore, at provident eius + alias maxime pariatur non deleniti ipsum sequi rem eveniet laboriosam magni + expedita?

``` diff --git a/files/fr/web/css/shape-margin/index.md b/files/fr/web/css/shape-margin/index.md index a466b3d7f2c261..33a2828c3c7be5 100644 --- a/files/fr/web/css/shape-margin/index.md +++ b/files/fr/web/css/shape-margin/index.md @@ -68,13 +68,13 @@ section { ```html
- We are not quite sure of any one thing in biology; our knowledge of geology - is relatively very slight, and the economic laws of society are - uncertain to every one except some individual who attempts to set them - forth; but before the world was fashioned the square on the hypotenuse - was equal to the sum of the squares on the other two sides of a right - triangle, and it will be so after this world is dead; and the inhabitant - of Mars, if he exists, probably knows its truth as we know it. + We are not quite sure of any one thing in biology; our knowledge of geology is + relatively very slight, and the economic laws of society are uncertain to + every one except some individual who attempts to set them forth; but before + the world was fashioned the square on the hypotenuse was equal to the sum of + the squares on the other two sides of a right triangle, and it will be so + after this world is dead; and the inhabitant of Mars, if he exists, probably + knows its truth as we know it.
``` diff --git a/files/fr/web/css/shape-outside/index.md b/files/fr/web/css/shape-outside/index.md index 7fe78a90204ce0..5f8c15e29d69bb 100644 --- a/files/fr/web/css/shape-outside/index.md +++ b/files/fr/web/css/shape-outside/index.md @@ -25,12 +25,11 @@ shape-outside: circle(); shape-outside: ellipse(); shape-outside: inset(10px 10px 10px 10px); shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); -shape-outside: linear-gradient(45deg, rgba(255,255,255,0) 150px, red 150px); +shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); /* Valeur de type */ shape-outside: url(image.png); - /* Valeur de type */ shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); @@ -78,10 +77,9 @@ Afin de pouvoir interpoler entre deux formes, on appliquera les règles suivante

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

``` From bfca232f0daebcf5bd49a3d7e0b5e29e24c3cce2 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Wed, 26 Jul 2023 23:44:01 -0700 Subject: [PATCH 28/31] fr: Format /web/css using Prettier (part 7) (#14632) --- .prettierignore | 4 + .../fr/web/css/shorthand_properties/index.md | 180 +++++++++--------- files/fr/web/css/specificity/index.md | 67 ++++--- files/fr/web/css/specified_value/index.md | 15 +- files/fr/web/css/syntax/index.md | 1 + files/fr/web/css/tab-size/index.md | 1 + files/fr/web/css/table-layout/index.md | 3 +- files/fr/web/css/text-align/index.md | 26 +-- .../fr/web/css/text-combine-upright/index.md | 20 +- .../fr/web/css/text-decoration-line/index.md | 4 +- .../css/text-decoration-thickness/index.md | 5 +- files/fr/web/css/text-decoration/index.md | 17 +- .../web/css/text-emphasis-position/index.md | 5 +- files/fr/web/css/text-emphasis-style/index.md | 8 +- files/fr/web/css/text-emphasis/index.md | 10 +- files/fr/web/css/text-indent/index.md | 24 ++- files/fr/web/css/text-justify/index.md | 35 +++- files/fr/web/css/text-overflow/index.md | 41 ++-- files/fr/web/css/text-rendering/index.md | 34 +++- files/fr/web/css/text-shadow/index.md | 27 ++- .../fr/web/css/text-underline-offset/index.md | 10 +- .../web/css/text-underline-position/index.md | 4 +- files/fr/web/css/top/index.md | 2 +- files/fr/web/css/touch-action/index.md | 9 +- files/fr/web/css/transform-box/index.md | 2 +- .../css/transform-function/matrix/index.md | 4 +- .../css/transform-function/matrix3d/index.md | 52 ++--- .../css/transform-function/rotate3d/index.md | 4 +- .../css/transform-function/scale3d/index.md | 6 +- .../css/transform-function/scalex/index.md | 4 +- .../css/transform-function/scaley/index.md | 4 +- .../css/transform-function/scalez/index.md | 4 +- .../web/css/transform-function/skew/index.md | 4 +- .../css/transform-function/translate/index.md | 3 +- .../transform-function/translate3d/index.md | 2 +- .../transform-function/translatez/index.md | 2 +- files/fr/web/css/transform-origin/index.md | 134 +++++++------ files/fr/web/css/transform/index.md | 4 +- files/fr/web/css/transition-duration/index.md | 8 +- files/fr/web/css/transition-property/index.md | 5 +- .../css/transition-timing-function/index.md | 106 ++++++----- files/fr/web/css/transition/index.md | 4 +- files/fr/web/css/universal_selectors/index.md | 6 +- files/fr/web/css/url/index.md | 14 +- files/fr/web/css/used_value/index.md | 4 +- files/fr/web/css/user-select/index.md | 4 +- .../css/using_css_custom_properties/index.md | 34 ++-- files/fr/web/css/var/index.md | 2 +- files/fr/web/css/vertical-align/index.md | 86 +++++---- files/fr/web/css/viewport_concepts/index.md | 26 +-- files/fr/web/css/visibility/index.md | 10 +- .../web/css/visual_formatting_model/index.md | 23 ++- files/fr/web/css/white-space/index.md | 18 +- files/fr/web/css/widows/index.md | 9 +- files/fr/web/css/width/index.md | 8 +- files/fr/web/css/will-change/index.md | 16 +- files/fr/web/css/word-break/index.md | 32 ++-- files/fr/web/css/word-spacing/index.md | 4 +- files/fr/web/css/writing-mode/index.md | 96 +++++----- 59 files changed, 737 insertions(+), 559 deletions(-) diff --git a/.prettierignore b/.prettierignore index fc7e94e53d6cca..3a352bf64221a6 100644 --- a/.prettierignore +++ b/.prettierignore @@ -20,6 +20,10 @@ build/ /files/fr/glossary/grid_lines/index.md /files/fr/glossary/main_axis/index.md /files/fr/learn/server-side/django/forms/index.md +/files/fr/web/css/align-self/index.md +/files/fr/web/css/justify-content/index.md +/files/fr/web/css/place-items/index.md +/files/fr/web/css/place-self/index.md /files/pt-br/learn/server-side/django/forms/index.md /files/ru/learn/server-side/django/forms/index.md /files/ru/learn/server-side/django/introduction/index.md diff --git a/files/fr/web/css/shorthand_properties/index.md b/files/fr/web/css/shorthand_properties/index.md index 92b664a894572f..848d0d75a0cdef 100644 --- a/files/fr/web/css/shorthand_properties/index.md +++ b/files/fr/web/css/shorthand_properties/index.md @@ -16,98 +16,98 @@ Bien que les propriétés raccourcies soient pratiques à utiliser. Il est néce 1. Une valeur qui n'est pas définie pour la propriété raccourcie **sera réinitialisée avec sa valeur initiale**. Cela peut sembler anecdotique mais attention aux valeurs qui seront surchargées et à l'ordre des déclarations. Ainsi : - ```css - background-color: red; - background: url(images/bg.gif) no-repeat top right; - ``` + ```css + background-color: red; + background: url(images/bg.gif) no-repeat top right; + ``` - ne définira pas la couleur d'arrière-plan en rouge mais avec la valeur par défaut de {{cssxref("background-color")}} `transparent` car la deuxième déclaration prend le pas sur la première. + ne définira pas la couleur d'arrière-plan en rouge mais avec la valeur par défaut de {{cssxref("background-color")}} `transparent` car la deuxième déclaration prend le pas sur la première. 2. L'héritage des propriétés ne peut avoir lieu qu'avec les propriétés individuelles . En effet, les valeurs absentes sont remplacées par leurs valeurs initiales et il est donc impossible d'hériter des valeurs en les omettant. Le mot-clé {{cssxref("inherit")}} pourra être appliqué à une propriété mais ce sera sur l'ensemble et non pour une valeur donnée ou une autre. Ainsi, pour utiliser une valeur héritée sur une propriété spécifique, il faudra utiliser cette propriété « longue » avec le mot-clé `inherit.` 3. Les propriétés raccourcies n'ont pas d'ordre spécifique pour trier les valeurs des propriétés détaillées qu'elles remplacent. Cela fonctionne sans problème lorsque les différentes propriétés utilisent différents types de valeurs car l'ordre n'a alors aucune importance. Toutefois, lorsque les différentes propriétés peuvent prendre les mêmes valeurs, cela n'est pas si simple. On peut regrouper les différents cas en deux catégories distinctes : - 1. Les propriétés raccourcies qui gèrent les bords d'une boîte telles que {{cssxref("border-style")}}, {{cssxref("margin")}} ou {{cssxref("padding")}}. Elles utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : - - - - - - - - - - - - - - - - - - - - -
border1.png - 1 valeur : border-width: 1em — La valeur unique - s'adresse à tous les côtés. -
border2.png - 2 valeurs : border-width: 1em 2em — La première - valeur représente les côtés horizontaux en haut et en bas. La seconde - valeur représente les côtés verticaux, à gauche et à droite. -
border3.png - 3 valeurs : border-width: 1em 2em 3em — La - première valeur représente le côté haut, la deuxième les côtés gauche et - droit et la troisième représente le côté bas. -
border4.png -

- 4 valeurs : border-width: 1em 2em 3em 4em — Les - quatre valeurs représentent respectivement le côté haut, le côté - droit, le côté bas et le côté haut, toujours dans cet ordre (le sens - horaire). -

-
- - 2. De la même façon, les propriétés raccourcies relatives aux coins d'une boîte comme {{cssxref("border-radius")}} utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : - - - - - - - - - - - - - - - - - - - - -
corner1.png - 1 valeur : border-radius: 1em — La valeur - s'applique à tous les coins. -
corner2.png - 2 valeurs : border-radius: 1em 2em — La première - valeur s'applique aux coins en haut à gauche et en bas à droite et la - deuxième s'applique aux coins en haut à droite et en bas à gauche. -
corner3.png - 3 valeurs : border-radius: 1em 2em 3em — La - première valeur représente le coin en haut à gauche, la deuxième - représente les coins en haut à droite et en bas à gauche et la troisième - valeur représente le coin en bas à droite. -
corner4.png -

- 4 valeurs : border-radius: 1em 2em 3em 4em — Les - quatre valeurs s'appliquent respectivement au coin en haut à gauche, - en haut à droite, en bas à droite et en bas à gauche, toujours dans - cet ordre (le sens horaire). -

-
+ 1. Les propriétés raccourcies qui gèrent les bords d'une boîte telles que {{cssxref("border-style")}}, {{cssxref("margin")}} ou {{cssxref("padding")}}. Elles utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : + + + + + + + + + + + + + + + + + + + + +
border1.png + 1 valeur : border-width: 1em — La valeur unique + s'adresse à tous les côtés. +
border2.png + 2 valeurs : border-width: 1em 2em — La première + valeur représente les côtés horizontaux en haut et en bas. La seconde + valeur représente les côtés verticaux, à gauche et à droite. +
border3.png + 3 valeurs : border-width: 1em 2em 3em — La + première valeur représente le côté haut, la deuxième les côtés gauche et + droit et la troisième représente le côté bas. +
border4.png +

+ 4 valeurs : border-width: 1em 2em 3em 4em — Les + quatre valeurs représentent respectivement le côté haut, le côté + droit, le côté bas et le côté haut, toujours dans cet ordre (le sens + horaire). +

+
+ + 2. De la même façon, les propriétés raccourcies relatives aux coins d'une boîte comme {{cssxref("border-radius")}} utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : + + + + + + + + + + + + + + + + + + + + +
corner1.png + 1 valeur : border-radius: 1em — La valeur + s'applique à tous les coins. +
corner2.png + 2 valeurs : border-radius: 1em 2em — La première + valeur s'applique aux coins en haut à gauche et en bas à droite et la + deuxième s'applique aux coins en haut à droite et en bas à gauche. +
corner3.png + 3 valeurs : border-radius: 1em 2em 3em — La + première valeur représente le coin en haut à gauche, la deuxième + représente les coins en haut à droite et en bas à gauche et la troisième + valeur représente le coin en bas à droite. +
corner4.png +

+ 4 valeurs : border-radius: 1em 2em 3em 4em — Les + quatre valeurs s'appliquent respectivement au coin en haut à gauche, + en haut à droite, en bas à droite et en bas à gauche, toujours dans + cet ordre (le sens horaire). +

+
## Les propriétés concernant l'arrière-plan @@ -137,7 +137,7 @@ Les déclarations suivantes : ```css font-style: italic; font-weight: bold; -font-size: .8em; +font-size: 0.8em; line-height: 1.2; font-family: Arial, sans-serif; ``` @@ -145,7 +145,9 @@ font-family: Arial, sans-serif; Peuvent être synthétisées en une seule déclaration avec la propriété raccourcie : ```css -font: italic bold .8em/1.2 Arial, sans-serif; +font: + italic bold 0.8em/1.2 Arial, + sans-serif; ``` > **Note :** Pour être tout à fait précis, la déclaration raccourcie précédente est équivalente aux déclarations détaillées ci-avant auxquelles on ajoutera `font-variant: normal` et `font-size-adjust: none` (CSS2.0 / CSS3), `font-stretch: normal` (CSS3). diff --git a/files/fr/web/css/specificity/index.md b/files/fr/web/css/specificity/index.md index f28084d5f9fb17..1af0d01bd23454 100644 --- a/files/fr/web/css/specificity/index.md +++ b/files/fr/web/css/specificity/index.md @@ -43,26 +43,36 @@ Lorsqu'une règle `important` est utilisée dans une déclaration de style, cett 1. Utiliser mieux la cascade CSS 2. Utiliser davantage des règles spécifiques. En indiquant un ou plusieurs éléments avant l'élément sélectionné, la règle devient plus spécifique et sa priorité est accrue : - ```html -
- Texte -
- ``` - - ```css - div#test span { color: green; } - div span { color: blue; } - span { color: red; } - ``` - - L'ordre n'a aucune importance, le texte sera en vert (_green_) car cette règle est plus spécifique. (Également, la règle pour bleu est prioritaire par rapport à celle pour rouge, là encore l'ordre n'a pas d'importance) + ```html +
+ Texte +
+ ``` + + ```css + div#test span { + color: green; + } + div span { + color: blue; + } + span { + color: red; + } + ``` + + L'ordre n'a aucune importance, le texte sera en vert (_green_) car cette règle est plus spécifique. (Également, la règle pour bleu est prioritaire par rapport à celle pour rouge, là encore l'ordre n'a pas d'importance) 3. En rapport avec le point 2, le fait de dupliquer des sélecteurs simples afin d''augmenter la spécificité lorsque vous n'avez aucun autre moyen de le faire, n'a aucun sens. - ```css - #monId#monId span { color: yellow; } - .maClasse.maClasse span { color: orange; } - ``` + ```css + #monId#monId span { + color: yellow; + } + .maClasse.maClasse span { + color: orange; + } + ``` #### Utilisation de !important @@ -105,15 +115,23 @@ A) Ajouter une autre règle CSS avec `!important` et, soit donner au sélecteur Quelques exemples avec une spécificité accrue : ```css -table td { height: 50px !important; } -.monTableau td { height: 50px !important; } -#monTableau td { height: 50px !important; } +table td { + height: 50px !important; +} +.monTableau td { + height: 50px !important; +} +#monTableau td { + height: 50px !important; +} ``` B) Ou ajouter le même sélecteur après le sélecteur existant : ```css -td { height: 50px !important; } +td { + height: 50px !important; +} ``` C) Ou, de préférence, réécrire la règle d'origine afin d'éviter totalement l'utilisation de `!important`. @@ -200,7 +218,12 @@ div p { ```html hidden
-⚠️ Votre navigateur ne prend pas en charge la pseudo-classe :where(). + ⚠️ Votre navigateur ne prend pas en charge la pseudo-classe + :where().
``` diff --git a/files/fr/web/css/specified_value/index.md b/files/fr/web/css/specified_value/index.md index c8dfcef549479b..550d8319285050 100644 --- a/files/fr/web/css/specified_value/index.md +++ b/files/fr/web/css/specified_value/index.md @@ -19,14 +19,17 @@ La **valeur définie** d'une propriété CSS est celle explicitement définie da ```html

Ma couleur provient explicitement de la feuille de style CSS.

-
Les valeurs définies de mes propriétés utilisent - les valeurs initiales (par défaut) car aucune n'est fournie - dans la feuille de style CSS.
+
+ Les valeurs définies de mes propriétés utilisent les valeurs initiales (par + défaut) car aucune n'est fournie dans la feuille de style CSS. +
-

La valeur définie pour ma police n'est pas fournie explicitement - dans la feuille de style et est donc héritée de mon parent. - Toutefois, la bordure n'est pas une propriété héritée.

+

+ La valeur définie pour ma police n'est pas fournie explicitement dans la + feuille de style et est donc héritée de mon parent. Toutefois, la bordure + n'est pas une propriété héritée. +

``` diff --git a/files/fr/web/css/syntax/index.md b/files/fr/web/css/syntax/index.md index 09ff43d86753d0..d843f602fb8347 100644 --- a/files/fr/web/css/syntax/index.md +++ b/files/fr/web/css/syntax/index.md @@ -4,6 +4,7 @@ slug: Web/CSS/Syntax l10n: sourceCommit: 71c4bc0b6329ec40ddbefd8d3124547e91cfa612 --- + {{CSSRef}} L'objectif fondamental du langage Cascading Style Sheets ([CSS](/fr/docs/Web/CSS)) est de permettre à un moteur de navigation d'associer des fonctionnalités spécifiques, comme les couleurs, le positionnement ou les décorations à des éléments de la page. La _syntaxe CSS_ reflète cet objectif et ses éléments de base sont : diff --git a/files/fr/web/css/tab-size/index.md b/files/fr/web/css/tab-size/index.md index 5f980132ddbbbc..82ac42bbfd6834 100644 --- a/files/fr/web/css/tab-size/index.md +++ b/files/fr/web/css/tab-size/index.md @@ -45,6 +45,7 @@ tab-size: unset; ### HTML + ```html 
 	print "tabulation avant"
diff --git a/files/fr/web/css/table-layout/index.md b/files/fr/web/css/table-layout/index.md
index 5fcef30147920b..b1531ead3fa479 100644
--- a/files/fr/web/css/table-layout/index.md
+++ b/files/fr/web/css/table-layout/index.md
@@ -69,7 +69,8 @@ Cet exemple utilise `table-layout: fixed` et une largeur donnée (avec la propri
   border: 1px solid red;
 }
 
-tr, td {
+tr,
+td {
   border: solid;
 }
 
diff --git a/files/fr/web/css/text-align/index.md b/files/fr/web/css/text-align/index.md
index edcb6f0a29087e..8f231b8610e8b5 100644
--- a/files/fr/web/css/text-align/index.md
+++ b/files/fr/web/css/text-align/index.md
@@ -76,10 +76,10 @@ La propriété `text-align` peut être définie grâce à l'un des mots-clés de
 ```html
 

   Il y avait en Vestphalie, dans le château de M. le baron de
-  Thunder-ten-tronckh, un jeune garçon à qui la nature avait
-  donné les moeurs les plus douces. Sa physionomie annonçait
-  son âme. Il avait le jugement assez droit, avec l’esprit le plus
-  simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
+  Thunder-ten-tronckh, un jeune garçon à qui la nature avait donné les moeurs
+  les plus douces. Sa physionomie annonçait son âme. Il avait le jugement assez
+  droit, avec l’esprit le plus simple ; c’est, je crois, pour cette raison qu’on
+  le nommait Candide.
 

 ```
 
@@ -103,10 +103,10 @@ La propriété `text-align` peut être définie grâce à l'un des mots-clés de
 ```html
 

   Il y avait en Vestphalie, dans le château de M. le baron de
-  Thunder-ten-tronckh, un jeune garçon à qui la nature avait
-  donné les moeurs les plus douces. Sa physionomie annonçait
-  son âme. Il avait le jugement assez droit, avec l’esprit le plus
-  simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
+  Thunder-ten-tronckh, un jeune garçon à qui la nature avait donné les moeurs
+  les plus douces. Sa physionomie annonçait son âme. Il avait le jugement assez
+  droit, avec l’esprit le plus simple ; c’est, je crois, pour cette raison qu’on
+  le nommait Candide.
 

 ```
 
@@ -130,10 +130,10 @@ La propriété `text-align` peut être définie grâce à l'un des mots-clés de
 ```html
 

   Il y avait en Vestphalie, dans le château de M. le baron de
-  Thunder-ten-tronckh, un jeune garçon à qui la nature avait
-  donné les moeurs les plus douces. Sa physionomie annonçait
-  son âme. Il avait le jugement assez droit, avec l’esprit le plus
-  simple ; c’est, je crois, pour cette raison qu’on le nommait Candide.
+  Thunder-ten-tronckh, un jeune garçon à qui la nature avait donné les moeurs
+  les plus douces. Sa physionomie annonçait son âme. Il avait le jugement assez
+  droit, avec l’esprit le plus simple ; c’est, je crois, pour cette raison qu’on
+  le nommait Candide.
 

 ```
 
@@ -178,7 +178,7 @@ La méthode la plus générique pour centrer un bloc plutot que de centrer son c
 L'espacement créé entre les mots par la justification du texte peut rendre la lecture difficile pour les personnes dyslexiques ou souffrant de troubles cognitifs.
 
 - [Comprendre les règles WCAG 1.4](/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)
-- [_Understanding Success Criterion 1.4.8  | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
+- [_Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
 
 ## Spécifications
 
diff --git a/files/fr/web/css/text-combine-upright/index.md b/files/fr/web/css/text-combine-upright/index.md
index 9d8287c5c4e9cb..e757bbfbf87b31 100644
--- a/files/fr/web/css/text-combine-upright/index.md
+++ b/files/fr/web/css/text-combine-upright/index.md
@@ -16,7 +16,7 @@ text-combine-upright: none;
 text-combine-upright: all;
 
 /* Valeurs pour les chiffres */
-text-combine-upright: digits;   /* 2 chiffres qui se suivent prendront la place d'un caractère dans du texte 
+text-combine-upright: digits; /* 2 chiffres qui se suivent prendront la place d'un caractère dans du texte 
                                    vertical */
 text-combine-upright: digits 4; /* Compresse jusqu'à 4 chiffres consécutifs afin qu'ils occupent l'espace 
                                    d'un caractère dans du texte vertical */
@@ -80,16 +80,24 @@ Pour utiliser `all`, on devra baliser chaque fragment de texte horizontal mais c
 #### HTML
 
 ```html
-
民國105年4月29日

+

+  民國105年4月29日
+

 ```
 
 #### CSS
 
 ```css
-html { writing-mode: vertical-rl; font: 24px serif }
-.num { text-combine-upright: all }
+html {
+  writing-mode: vertical-rl;
+  font: 24px serif;
+}
+.num {
+  text-combine-upright: all;
+}
 ```
 
 #### Résultat
diff --git a/files/fr/web/css/text-decoration-line/index.md b/files/fr/web/css/text-decoration-line/index.md
index d691adde126b27..0d96d3aa781202 100644
--- a/files/fr/web/css/text-decoration-line/index.md
+++ b/files/fr/web/css/text-decoration-line/index.md
@@ -22,8 +22,8 @@ text-decoration-line: overline;
 text-decoration-line: line-through;
 
 /* Valeurs avec plusieurs mots-clés */
-text-decoration-line: underline overline;                /* On a deux décorations pour la ligne */
-text-decoration-line: overline underline line-through;   /* On a plusieurs décorations */
+text-decoration-line: underline overline; /* On a deux décorations pour la ligne */
+text-decoration-line: overline underline line-through; /* On a plusieurs décorations */
 
 /* Valeurs globales */
 text-decoration-line: inherit;
diff --git a/files/fr/web/css/text-decoration-thickness/index.md b/files/fr/web/css/text-decoration-thickness/index.md
index d72df257a18acd..9f2559ecb8a4c9 100644
--- a/files/fr/web/css/text-decoration-thickness/index.md
+++ b/files/fr/web/css/text-decoration-thickness/index.md
@@ -45,7 +45,10 @@ text-decoration-thickness: unset;
 ```html
 
Voici du texte avec un soulignement rouge de 2px.

 
Celui est souligné et surligné.

-
Ce texte sera souligné avec une ligne bleue de 1px si la formulation raccourcie est prise en charge.

+

+  Ce texte sera souligné avec une ligne bleue de 1px si la formulation
+  raccourcie est prise en charge.
+

 ```
 
 ### CSS
diff --git a/files/fr/web/css/text-decoration/index.md b/files/fr/web/css/text-decoration/index.md
index 7f51ac3536f174..fb605e934615fc 100644
--- a/files/fr/web/css/text-decoration/index.md
+++ b/files/fr/web/css/text-decoration/index.md
@@ -16,10 +16,10 @@ La propriété **`text-decoration`** est utilisée pour « décorer » le texte
 
 ```css
 /* Valeurs avec mots-clés */
-text-decoration: none;                 /* Aucune décoration */
-text-decoration: underline red;        /* On souligne en rouge */
-text-decoration: underline wavy red;   /* On souligne en rouge avec */
-                                       /* une ligne ondulée */
+text-decoration: none; /* Aucune décoration */
+text-decoration: underline red; /* On souligne en rouge */
+text-decoration: underline wavy red; /* On souligne en rouge avec */
+/* une ligne ondulée */
 
 /* Valeurs globales */
 text-decoration: inherit;
@@ -80,10 +80,11 @@ text-decoration: unset;
 
Ce texte a une ligne en dessous.

 
Ce texte a une ligne au dessus.

 
Ce texte est barré d'une ligne.

-
Ce lien ne sera pas souligné,
-    comme les liens le sont normalement. Attention à ces décorations
-    sur les ancres cars le soulignement sert souvent d'indication pour
-    un hyperlien.

+

+  Ce lien ne sera pas souligné, comme les liens le
+  sont normalement. Attention à ces décorations sur les ancres cars le
+  soulignement sert souvent d'indication pour un hyperlien.
+

 
Ce texte a des lignes en dessous et au dessus.

 
Ce texte peut clignoter selon le navigateur utilisé.

 ```
diff --git a/files/fr/web/css/text-emphasis-position/index.md b/files/fr/web/css/text-emphasis-position/index.md
index ebcad57b27797f..9a7376a1437924 100644
--- a/files/fr/web/css/text-emphasis-position/index.md
+++ b/files/fr/web/css/text-emphasis-position/index.md
@@ -17,7 +17,6 @@ text-emphasis-position: over left;
 text-emphasis-position: under right;
 text-emphasis-position: under left;
 
-
 text-emphasis-position: left over;
 text-emphasis-position: right under;
 text-emphasis-position: left under;
@@ -124,12 +123,12 @@ D'autres préfèrent masquer le contenu ruby et privilégier les marques d'empha
 
 ```css
 em {
- /* On utilise text-emphasis pour les  */
+  /* On utilise text-emphasis pour les  */
   text-emphasis: dot;
 }
 
 em rt {
- /* On masque le ruby dans les éléments  */
+  /* On masque le ruby dans les éléments  */
   display: none;
 }
 ```
diff --git a/files/fr/web/css/text-emphasis-style/index.md b/files/fr/web/css/text-emphasis-style/index.md
index 224785139db9f6..bd3f9ca0635ecc 100644
--- a/files/fr/web/css/text-emphasis-style/index.md
+++ b/files/fr/web/css/text-emphasis-style/index.md
@@ -14,10 +14,10 @@ La propriété **`text-emphasis-style`** définit le type d'emphase utilisée. C
 text-emphasis-style: none;
 
 /*  Valeur distincte */
-text-emphasis-style: 'x';
-text-emphasis-style: '点';
-text-emphasis-style: '\25B2';
-text-emphasis-style: '*';
+text-emphasis-style: "x";
+text-emphasis-style: "点";
+text-emphasis-style: "\25B2";
+text-emphasis-style: "*";
 
 /* Valeurs avec un mot-clé */
 text-emphasis-style: filled;
diff --git a/files/fr/web/css/text-emphasis/index.md b/files/fr/web/css/text-emphasis/index.md
index 9733f7264a4c3f..b9c2d76c731526 100644
--- a/files/fr/web/css/text-emphasis/index.md
+++ b/files/fr/web/css/text-emphasis/index.md
@@ -24,13 +24,13 @@ text-emphasis: none; /* Pas de marque */
 
 /* Chaîne de caractères */
 /* Type         */
-text-emphasis: 'x';
-text-emphasis: '点';
-text-emphasis: '\25B2';
-text-emphasis: '*' #555;
+text-emphasis: "x";
+text-emphasis: "点";
+text-emphasis: "\25B2";
+text-emphasis: "*" #555;
 /* À ne pas utiliser, cela pourra être */
 /* considéré comme 't' uniquement      */
-text-emphasis: 'toto';
+text-emphasis: "toto";
 
 /* Valeurs avec mot(s)-clé(s) */
 text-emphasis: filled;
diff --git a/files/fr/web/css/text-indent/index.md b/files/fr/web/css/text-indent/index.md
index f8e3899fab0356..c5119b22ff29ac 100644
--- a/files/fr/web/css/text-indent/index.md
+++ b/files/fr/web/css/text-indent/index.md
@@ -63,10 +63,14 @@ text-indent: unset;
 #### HTML
 
 ```html
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

+

+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+

+

+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+

 ```
 
 #### CSS
@@ -87,10 +91,14 @@ p {
 #### HTML
 
 ```html
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
-nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

+

+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+

+

+  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+

 ```
 
 #### CSS
diff --git a/files/fr/web/css/text-justify/index.md b/files/fr/web/css/text-justify/index.md
index 61d02e9e823532..7be64c2ac1b948 100644
--- a/files/fr/web/css/text-justify/index.md
+++ b/files/fr/web/css/text-justify/index.md
@@ -44,11 +44,36 @@ La propriété `text-justify` peut être définie grâce à l'un des mots-clés
 ## Exemples
 
 ```html
-
text-justify: none — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.

-
text-justify: auto — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.

-
text-justify: distribute — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.

-
text-justify: inter-word — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.

-
text-justify: inter-character — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.

+

+  text-justify: none — Lorem ipsum dolor sit amet, consectetur
+  adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id
+  mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat
+  justo id, feugiat leo. Cras eu elementum dui.
+

+

+  text-justify: auto — Lorem ipsum dolor sit amet, consectetur
+  adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id
+  mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat
+  justo id, feugiat leo. Cras eu elementum dui.
+

+

+  text-justify: distribute — Lorem ipsum dolor sit amet,
+  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
+  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
+  consequat justo id, feugiat leo. Cras eu elementum dui.
+

+

+  text-justify: inter-word — Lorem ipsum dolor sit amet,
+  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
+  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
+  consequat justo id, feugiat leo. Cras eu elementum dui.
+

+

+  text-justify: inter-character — Lorem ipsum dolor sit amet,
+  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
+  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
+  consequat justo id, feugiat leo. Cras eu elementum dui.
+

 ```
 
 ```css
diff --git a/files/fr/web/css/text-overflow/index.md b/files/fr/web/css/text-overflow/index.md
index a2e22f61225bea..39bb430c59962a 100644
--- a/files/fr/web/css/text-overflow/index.md
+++ b/files/fr/web/css/text-overflow/index.md
@@ -85,25 +85,36 @@ Cet exemple illustre différentes valeurs pour `text-overflow`, appliquée à un
 #### HTML
 
 ```html
-
 

   
Left to right text

   
clip

-  
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+  

+    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  

   
ellipsis

-  
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+  

+    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  

   
" [..]"

-  
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+  

+    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  

 

 
 

   
Right to left text

   
clip

-  
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+  

+    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  

   
ellipsis

-  
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+  

+    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  

   
" [..]"

-  
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+  

+    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  

 

 ```
 
@@ -158,13 +169,21 @@ Cette exemple illustre la syntaxe à deux valeurs pour `text-overflow`, où on p
 
 ```html
 
clip clip

-
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

+  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+

 
clip ellipsis

-
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

+  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+

 
ellipsis ellipsis

-
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

+  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+

 
ellipsis " [..]"

-
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+

+  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+

 ```
 
 #### CSS
diff --git a/files/fr/web/css/text-rendering/index.md b/files/fr/web/css/text-rendering/index.md
index e472704ac4037e..0ddca3f9dfb1ee 100644
--- a/files/fr/web/css/text-rendering/index.md
+++ b/files/fr/web/css/text-rendering/index.md
@@ -64,8 +64,20 @@ Cet exemple illustre comment `optimizeLegibility` est automatiquement utilisé p
 #### CSS
 
 ```css
-.small { font: 19.9px "Times New Roman", "Georgia", "Palatino", serif; }
-.big   { font: 20px "Times New Roman", "Georgia", "Palatino", serif; }
+.small {
+  font:
+    19.9px "Times New Roman",
+    "Georgia",
+    "Palatino",
+    serif;
+}
+.big {
+  font:
+    20px "Times New Roman",
+    "Georgia",
+    "Palatino",
+    serif;
+}
 ```
 
 #### HTML
@@ -86,10 +98,20 @@ Cet exemple illustre la différence d'apparence entre `optimizeSpeed` et `optimi
 #### CSS
 
 ```css
-p { font: 1.5em "Times New Roman", "Georgia", "Palatino", serif }
-
-.speed       { text-rendering: optimizeSpeed; }
-.legibility  { text-rendering: optimizeLegibility; }
+p {
+  font:
+    1.5em "Times New Roman",
+    "Georgia",
+    "Palatino",
+    serif;
+}
+
+.speed {
+  text-rendering: optimizeSpeed;
+}
+.legibility {
+  text-rendering: optimizeLegibility;
+}
 ```
 
 #### HTML
diff --git a/files/fr/web/css/text-shadow/index.md b/files/fr/web/css/text-shadow/index.md
index 1c3f532c9bb0d7..bb4a76b1a3ae9b 100644
--- a/files/fr/web/css/text-shadow/index.md
+++ b/files/fr/web/css/text-shadow/index.md
@@ -66,14 +66,15 @@ Cette propriété s'applique aux deux [pseudo-éléments](/fr/docs/Web/CSS/Pseud
 
 ```css
 .red-text-shadow {
-   text-shadow: red 0 -2px;
+  text-shadow: red 0 -2px;
 }
 ```
 
 ```html
-
Sed ut perspiciatis unde omnis iste
-    natus error sit voluptatem accusantium doloremque laudantium,
-    totam rem aperiam, eaque ipsa quae ab illo inventore.

+

+  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
+

 ```
 
 {{EmbedLiveSample('Ombre_simple', '660px', '90px')}}
@@ -82,16 +83,22 @@ Cette propriété s'applique aux deux [pseudo-éléments](/fr/docs/Web/CSS/Pseud
 
 ```css
 .white-text-with-blue-shadow {
-   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
-   color: white;
-   font: 1.5em Georgia, serif;
+  text-shadow:
+    1px 1px 2px black,
+    0 0 1em blue,
+    0 0 0.2em blue;
+  color: white;
+  font:
+    1.5em Georgia,
+    serif;
 }
 ```
 
 ```html
-
Sed ut perspiciatis unde omnis iste
-    natus error sit voluptatem accusantium doloremque laudantium,
-    totam rem aperiam, eaque ipsaquae ab illo inventore.

+

+  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+  doloremque laudantium, totam rem aperiam, eaque ipsaquae ab illo inventore.
+

 ```
 
 {{EmbedLiveSample('Ombres_multiples', '660px', '170px')}}
diff --git a/files/fr/web/css/text-underline-offset/index.md b/files/fr/web/css/text-underline-offset/index.md
index 1dfdfdc18283d4..f817343c1b1709 100644
--- a/files/fr/web/css/text-underline-offset/index.md
+++ b/files/fr/web/css/text-underline-offset/index.md
@@ -53,7 +53,7 @@ p {
   text-underline-offset: 1em;
 }
 
-.deuxlignes{
+.deuxlignes {
   text-decoration-line: underline overline;
 }
 ```
@@ -61,12 +61,10 @@ p {
 ### HTML
 
 ```html
-

-  Voici un texte souligné avec une ligne ondulée rouge !
-

+
Voici un texte souligné avec une ligne ondulée rouge !

 

-  Ce texte a une ligne en dessous et une ligne au dessus.
-  Seule la ligne du dessous est déplacée.
+  Ce texte a une ligne en dessous et une ligne au dessus. Seule la ligne du
+  dessous est déplacée.
 

 ```
 
diff --git a/files/fr/web/css/text-underline-position/index.md b/files/fr/web/css/text-underline-position/index.md
index 5e52f87d23bedf..f3de0421e1d58a 100644
--- a/files/fr/web/css/text-underline-position/index.md
+++ b/files/fr/web/css/text-underline-position/index.md
@@ -67,9 +67,7 @@ Cette propriété est héritée sur les différents éléments et n'est pas réi
 ### HTML
 
 ```html
-

-  C6H12O6
-

+
C6H12O6

 

   Et là avec des indices
   et du jambage
diff --git a/files/fr/web/css/top/index.md b/files/fr/web/css/top/index.md
index 5f71aae0357271..f2feedae55c0e9 100644
--- a/files/fr/web/css/top/index.md
+++ b/files/fr/web/css/top/index.md
@@ -91,7 +91,7 @@ div {
 p.relatif {
   position: relative;
   top: 5em;
-  border: 2px black solid
+  border: 2px black solid;
 }
 ```
 
diff --git a/files/fr/web/css/touch-action/index.md b/files/fr/web/css/touch-action/index.md
index f971831037fdae..752d110d55988f 100644
--- a/files/fr/web/css/touch-action/index.md
+++ b/files/fr/web/css/touch-action/index.md
@@ -74,9 +74,12 @@ La propriété `touch-action` peut être définie grâce à :
 ### HTML
 
 ```html
-
    Ma list
+
      
+  Ma list
   
    • UnLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll
      • 
-  
    • UnAutreLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll
      • 
+  
    • 
+    UnAutreLongTexteQuiDevraitTenirSurUneLigneHeureusementQuOnAOverflowScroll
+  
      • 
 
    
 ```
 
@@ -105,7 +108,7 @@ ul > li {
 Une déclaration `touch action: none;` empêchera le navigateur de zoomer. Cela peut empêcher les personnes à faible vision de lire et de comprendre le contenu de la page.
 
 - [Comprendre les règles WCAG 1.4](/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)
-- _[Understanding Success Criterion 1.4.4 - Understanding WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
+- _[Understanding Success Criterion 1.4.4 - Understanding WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)_
 
 ## Spécifications
 
diff --git a/files/fr/web/css/transform-box/index.md b/files/fr/web/css/transform-box/index.md
index dae2073dd23d4b..79ddcb9055e246 100644
--- a/files/fr/web/css/transform-box/index.md
+++ b/files/fr/web/css/transform-box/index.md
@@ -61,7 +61,7 @@ p {
 }
 
 .premier {
-   border: 3px black solid;
+  border: 3px black solid;
 }
 
 .deuxieme {
diff --git a/files/fr/web/css/transform-function/matrix/index.md b/files/fr/web/css/transform-function/matrix/index.md
index cd539ad7b315dc..51b516cb9345c2 100644
--- a/files/fr/web/css/transform-function/matrix/index.md
+++ b/files/fr/web/css/transform-function/matrix/index.md
@@ -109,8 +109,8 @@ p {
   background-color: teal;
 }
 
-.transformation{
-  transform: matrix(0.87,-0.5,0,0.87,0,1);
+.transformation {
+  transform: matrix(0.87, -0.5, 0, 0.87, 0, 1);
   background-color: blue;
 }
 ```
diff --git a/files/fr/web/css/transform-function/matrix3d/index.md b/files/fr/web/css/transform-function/matrix3d/index.md
index 10d96552ee2985..acc1635352b9b3 100644
--- a/files/fr/web/css/transform-function/matrix3d/index.md
+++ b/files/fr/web/css/transform-function/matrix3d/index.md
@@ -83,8 +83,25 @@ p {
   background-color: teal;
 }
 
-.transformation{
-  transform: matrix3d(0.87,-0.5,0.00,0,0.50,0.87,0.00,0,0,0,1,0,0,0,0,1);
+.transformation {
+  transform: matrix3d(
+    0.87,
+    -0.5,
+    0,
+    0,
+    0.5,
+    0.87,
+    0,
+    0,
+    0,
+    0,
+    1,
+    0,
+    0,
+    0,
+    0,
+    1
+  );
   background-color: blue;
 }
 ```
@@ -99,9 +116,9 @@ p {
 
 ```html
 
    
- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
- Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere
- necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quaerat sit
+  soluta, quisquam exercitationem delectus qui unde in facere necessitatibus aut
+  quia porro dolorem nesciunt enim, at consequuntur aliquam esse?
 
    
 ```
 
@@ -118,7 +135,6 @@ body {
   flex-flow: row wrap;
   justify-content: center;
   align-content: center;
-
 }
 .foo {
   width: 50%;
@@ -129,7 +145,7 @@ body {
   text-align: center;
   font-family: system-ui, sans-serif;
   font-size: 14px;
-   /* Setting up animation for better demonstration */
+  /* Setting up animation for better demonstration */
   animation: MotionScale 2s alternate linear infinite;
 }
 
@@ -144,29 +160,13 @@ body {
         Translates every Z point by 0
         Scales down by 10%
     */
-    transform: matrix3d(
-      1,0,0,0,
-      0,1,0,0,
-      0,0,1,0,
-      -50,-100,0,1.1
-    );
-
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -50, -100, 0, 1.1);
   }
   50% {
-    transform: matrix3d(
-      1,0,0,0,
-      0,1,0,0,
-      0,0,1,0,
-      0,0,0,0.9
-    );
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.9);
   }
   to {
-     transform: matrix3d(
-      1,0,0,0,
-      0,1,0,0,
-      0,0,1,0,
-      50,100,0,1.1
-    )
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
   }
 }
 ```
diff --git a/files/fr/web/css/transform-function/rotate3d/index.md b/files/fr/web/css/transform-function/rotate3d/index.md
index 7afe36adeaedaa..a90089d32ed571 100644
--- a/files/fr/web/css/transform-function/rotate3d/index.md
+++ b/files/fr/web/css/transform-function/rotate3d/index.md
@@ -119,8 +119,8 @@ p {
   margin: auto;
 }
 
-.transformation{
-  transform: rotate3d(0,1,0,60deg);
+.transformation {
+  transform: rotate3d(0, 1, 0, 60deg);
   background-color: blue;
 }
 ```
diff --git a/files/fr/web/css/transform-function/scale3d/index.md b/files/fr/web/css/transform-function/scale3d/index.md
index 0969a9cc77c447..a3ba8ce34a986d 100644
--- a/files/fr/web/css/transform-function/scale3d/index.md
+++ b/files/fr/web/css/transform-function/scale3d/index.md
@@ -146,6 +146,6 @@ div {
 
 - [`transform`](/fr/docs/Web/CSS/transform)
 - [``](/fr/docs/Web/CSS/transform-function)
-- [`scaleZ()`](/fr/docs/Web/CSS/transform-function/scaleZ())
-- [`translate3d()`](/fr/docs/Web/CSS/transform-function/translate3d())
-- [`rotate3d()`](/fr/docs/Web/CSS/transform-function/rotate3d())
+- [`scaleZ()`]()
+- [`translate3d()`]()
+- [`rotate3d()`]()
diff --git a/files/fr/web/css/transform-function/scalex/index.md b/files/fr/web/css/transform-function/scalex/index.md
index bc89b93c6ec726..67673bf6c9c1d6 100644
--- a/files/fr/web/css/transform-function/scalex/index.md
+++ b/files/fr/web/css/transform-function/scalex/index.md
@@ -158,8 +158,8 @@ div {
 
 ## Voir aussi
 
-- [`scaleY()`](/fr/docs/Web/CSS/transform-function/scaleY())
-- [`scaleZ()`](/fr/docs/Web/CSS/transform-function/scaleZ())
+- [`scaleY()`]()
+- [`scaleZ()`]()
 - [`transform`](/fr/docs/Web/CSS/transform)
 - [``](/fr/docs/Web/CSS/transform-function)
 - [`transform-origin`](/fr/docs/Web/CSS/transform-origin)
diff --git a/files/fr/web/css/transform-function/scaley/index.md b/files/fr/web/css/transform-function/scaley/index.md
index 4028189f46dab6..6f11f246de5a3d 100644
--- a/files/fr/web/css/transform-function/scaley/index.md
+++ b/files/fr/web/css/transform-function/scaley/index.md
@@ -127,8 +127,8 @@ div {
 
 ## Voir aussi
 
-- [`scaleX()`](/fr/docs/Web/CSS/transform-function/scaleX())
-- [`scaleZ()`](/fr/docs/Web/CSS/transform-function/scaleZ())
+- [`scaleX()`]()
+- [`scaleZ()`]()
 - [`transform`](/fr/docs/Web/CSS/transform)
 - [``](/fr/docs/Web/CSS/transform-function)
 - [`transform-origin`](/fr/docs/Web/CSS/transform-origin)
diff --git a/files/fr/web/css/transform-function/scalez/index.md b/files/fr/web/css/transform-function/scalez/index.md
index ebe09836b4c0ac..229d4c5204cc6c 100644
--- a/files/fr/web/css/transform-function/scalez/index.md
+++ b/files/fr/web/css/transform-function/scalez/index.md
@@ -117,8 +117,8 @@ div {
 
 ## Voir aussi
 
-- [`scaleX()`](/fr/docs/Web/CSS/transform-function/scaleX())
-- [`scaleY()`](/fr/docs/Web/CSS/transform-function/scaleY())
+- [`scaleX()`]()
+- [`scaleY()`]()
 - [`transform`](/fr/docs/Web/CSS/transform)
 - [``](/fr/docs/Web/CSS/transform-function)
 - [`transform-origin`](/fr/docs/Web/CSS/transform-origin)
diff --git a/files/fr/web/css/transform-function/skew/index.md b/files/fr/web/css/transform-function/skew/index.md
index 6185202a64c13c..a2cd395c31eb6c 100644
--- a/files/fr/web/css/transform-function/skew/index.md
+++ b/files/fr/web/css/transform-function/skew/index.md
@@ -170,5 +170,5 @@ div {
 
 - [`transform`](/fr/docs/Web/CSS/transform)
 - [``](/fr/docs/Web/CSS/transform-function)
-- [`skewX()`](/fr/docs/Web/CSS/transform-function/skewX())
-- [`skewY()`](/fr/docs/Web/CSS/transform-function/skewY())
+- [`skewX()`]()
+- [`skewY()`]()
diff --git a/files/fr/web/css/transform-function/translate/index.md b/files/fr/web/css/transform-function/translate/index.md
index da7cb8af332453..01bed2788e32f4 100644
--- a/files/fr/web/css/transform-function/translate/index.md
+++ b/files/fr/web/css/transform-function/translate/index.md
@@ -118,7 +118,8 @@ div {
 }
 
 .moved {
-  transform: translate(10px); /* Équivalent à : translateX(10px) ou translate(10px, 0) */
+  /* Équivalent à : translateX(10px) ou translate(10px, 0) */
+  transform: translate(10px);
   background-color: pink;
 }
 ```
diff --git a/files/fr/web/css/transform-function/translate3d/index.md b/files/fr/web/css/transform-function/translate3d/index.md
index 4f449942037d58..a408ba8dad0c3a 100644
--- a/files/fr/web/css/transform-function/translate3d/index.md
+++ b/files/fr/web/css/transform-function/translate3d/index.md
@@ -89,7 +89,7 @@ div {
 }
 
 .moved {
-  transform: perspective(500px) translate3d(10px,0px,0px);
+  transform: perspective(500px) translate3d(10px, 0px, 0px);
   /* Équivalent à perspective(500px) translateX(10px)*/
   background-color: pink;
 }
diff --git a/files/fr/web/css/transform-function/translatez/index.md b/files/fr/web/css/transform-function/translatez/index.md
index 300c75f15838b7..2700df2274d47e 100644
--- a/files/fr/web/css/transform-function/translatez/index.md
+++ b/files/fr/web/css/transform-function/translatez/index.md
@@ -112,4 +112,4 @@ Si la valeur fournie à `perspective()` est inférieure à l'argument de `transl
 - [``](/fr/docs/Web/CSS/transform-function)
 - [Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
 - [`transform`](/fr/docs/Web/CSS/transform)
-- [`translateX()`](/fr/docs/Web/CSS/transform-function/translateX()) et [`translateY()`](/fr/docs/Web/CSS/transform-function/translateY())
+- [`translateX()`]() et [`translateY()`]()
diff --git a/files/fr/web/css/transform-origin/index.md b/files/fr/web/css/transform-origin/index.md
index fd27c5e5c41969..5a08387fe615a1 100644
--- a/files/fr/web/css/transform-origin/index.md
+++ b/files/fr/web/css/transform-origin/index.md
@@ -124,104 +124,112 @@ Cet exemple illustre ce que donnent les différentes valeurs de `transform-origi
 
 ```html hidden
 
    
+  
    
+    
     
    
+    
     
    
+  
    
 
-
    
-  
     
    
-  
     
    
-
    
-
-
    +  
     transform: none;
-
    
+
    
 
-
    
-  
     
    
-  
     
    
-
    
+  
    
+    
     
    
+    
     
    
+  
    
 
-
    +  
     transform: rotate(30deg);
-
    
+
    
 
-
    
-  
     
    
-  
     
    
-
    
+  
    
+    
     
    
+    
     
    
+  
    
 
-
    +  
     transform: rotate(30deg);
 transform-origin: 0 0;
-
    
+
    
 
-
    
-  
     
    
-  
     
    
-
    
+  
    
+    
     
    
+    
     
    
+  
    
 
-
    +  
     transform: rotate(30deg);
 transform-origin: 100% 100%;
-
    
+
    
 
-
    
-  
     
    
-  
     
    
-
    
+  
    
+    
     
    
+    
     
    
+  
    
 
-
    +  
     transform: rotate(30deg);
 transform-origin: -1em -3em;
-
    
+
    
 
-
    
-  
     
    
-  
     
    
-
    
+  
    
+    
     
    
+    
     
    
+  
    
 
-
    +  
     transform: scale(1.7);
-
    
+
    
 
-
    
-  
     
    
-  
     
    
-
    
+  
    
+    
     
    
+    
     
    
+  
    
 
-
    +  
     transform: scale(1.7);
 transform-origin: 0 0;
-
    
+
    
 
-
    
-  
     
    
-  
     
    
-
    
+  
    
+    
     
    
+    
     
    
+  
    
 
-
    +  
     transform: scale(1.7);
 transform-origin: 100% -30%;
-
    
+
    
 
-
    
-  
     
    
-  
     
    
-
    
+  
    
+    
     
    
+    
     
    
+  
    
 
-
    +  
     transform: skewX(50deg);
 transform-origin: 100% -30%;
-
    
+
    
 
-
    
-  
     
    
-  
     
    
-
    
+  
    
+    
     
    
+    
     
    
+  
    
 
-
    +  
     transform: skewY(50deg);
 transform-origin: 100% -30%;
-
    
-
+
    
 
    
 ```
 
@@ -278,7 +286,7 @@ transform-origin: 100% -30%;
   transform: scale(1.7);
 }
 
-.box7  {
+.box7 {
   transform: scale(1.7);
   transform-origin: 0 0;
 }
diff --git a/files/fr/web/css/transform/index.md b/files/fr/web/css/transform/index.md
index 553926bcb3d708..71c602367aca28 100644
--- a/files/fr/web/css/transform/index.md
+++ b/files/fr/web/css/transform/index.md
@@ -21,7 +21,7 @@ Si la propriété est différente de `none`, un [contexte d'empilement](/fr/docs
 transform: none;
 
 /* Valeurs fonctionnelles */
-transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
+transform: matrix(1, 2, 3, 4, 5, 6);
 transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
 
 transform: translate(12px, 50%);
@@ -44,7 +44,7 @@ transform: rotate(0.5turn);
 transform: rotateX(10deg);
 transform: rotateY(10deg);
 transform: rotateZ(10deg);
-transform: rotate3d(1, 2.0, 3.0, 10deg);
+transform: rotate3d(1, 2, 3, 10deg);
 
 transform: perspective(17px);
 
diff --git a/files/fr/web/css/transition-duration/index.md b/files/fr/web/css/transition-duration/index.md
index 709094063f9f32..d17f68c3dfdb94 100644
--- a/files/fr/web/css/transition-duration/index.md
+++ b/files/fr/web/css/transition-duration/index.md
@@ -48,13 +48,13 @@ transition-duration: unset;
 #### HTML
 
 ```html
-  
    0,5 secondes
    
+
    0,5 secondes
    
 
-  
    2 secondes
    
+
    2 secondes
    
 
-  
    4 secondes
    
+
    4 secondes
    
 
-  
+
 ```
 
 #### CSS
diff --git a/files/fr/web/css/transition-property/index.md b/files/fr/web/css/transition-property/index.md
index e4fbf6d2c35728..378e6ace6b5f74 100644
--- a/files/fr/web/css/transition-property/index.md
+++ b/files/fr/web/css/transition-property/index.md
@@ -31,7 +31,10 @@ transition-property: sliding-vertically;
 /* Valeurs multiples */
 transition-property: test1, animation4;
 transition-property: all, height, all;
-transition-property: all, -moz-specific, sliding;
+transition-property:
+  all,
+  -moz-specific,
+  sliding;
 
 /* Avec des valeurs globales */
 transition-property: inherit;
diff --git a/files/fr/web/css/transition-timing-function/index.md b/files/fr/web/css/transition-timing-function/index.md
index bc09cc8f7caa88..9b8bee7bd05146 100644
--- a/files/fr/web/css/transition-timing-function/index.md
+++ b/files/fr/web/css/transition-timing-function/index.md
@@ -33,7 +33,7 @@ transition-timing-function: step-end;
 
 /* Valeurs fonctionnelles */
 transition-timing-function: steps(4, jump-end);
-transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
 
 /* Valeurs avec une fonction en escalier */
 transition-timing-function: steps(4, jump-start);
@@ -44,7 +44,7 @@ transition-timing-function: steps(6, start);
 transition-timing-function: steps(8, end);
 
 /* Utilisation de plusieurs fonctions */
-transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);
 
 /* Valeurs globales */
 transition-timing-function: inherit;
@@ -118,33 +118,34 @@ transition-timing-function: unset;
 ```
 
 ```css hidden
-.parent {}
+.parent {
+}
 .parent > div[class] {
-    width: 12em;
-    min-width: 12em;
-    margin-bottom: 4px;
-    background-color: black;
-    border: 1px solid red;
-    color: white;
-    transition-property: all;
-    transition-duration: 7s;
+  width: 12em;
+  min-width: 12em;
+  margin-bottom: 4px;
+  background-color: black;
+  border: 1px solid red;
+  color: white;
+  transition-property: all;
+  transition-duration: 7s;
 }
-.parent > div.box1{
-    width: 90vw;
-    min-width: 24em;
-    background-color: magenta;
-    color: yellow;
-    border: 1px solid orange;
-    transition-property: all;
-    transition-duration: 2s;
+.parent > div.box1 {
+  width: 90vw;
+  min-width: 24em;
+  background-color: magenta;
+  color: yellow;
+  border: 1px solid orange;
+  transition-property: all;
+  transition-duration: 2s;
 }
 ```
 
 ```js hidden
 function updateTransition() {
   var els = document.querySelectorAll(".parent > div[class]");
-  for(var c = els.length, i = 0; i < c; i++) {
-     els[i].classList.toggle("box1");
+  for (var c = els.length, i = 0; i < c; i++) {
+    els[i].classList.toggle("box1");
   }
 }
 
@@ -153,22 +154,22 @@ var intervalID = window.setInterval(updateTransition, 10000);
 
 ```css
 .ease {
-   transition-timing-function: ease;
+  transition-timing-function: ease;
 }
 .easein {
-   transition-timing-function: ease-in;
+  transition-timing-function: ease-in;
 }
 .easeout {
-   transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
 }
 .easeinout {
-   transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
 }
 .linear {
-   transition-timing-function: linear;
+  transition-timing-function: linear;
 }
 .cb {
-   transition-timing-function: cubic-bezier(0.2,-2,0.8,2);
+  transition-timing-function: cubic-bezier(0.2, -2, 0.8, 2);
 }
 ```
 
@@ -188,33 +189,34 @@ var intervalID = window.setInterval(updateTransition, 10000);
 ```
 
 ```css hidden
-.parent {}
+.parent {
+}
 .parent > div[class] {
-    width: 12em;
-    min-width: 12em;
-    margin-bottom: 4px;
-    background-color: black;
-    border: 1px solid red;
-    color: white;
-    transition-property: all;
-    transition-duration:7s;
+  width: 12em;
+  min-width: 12em;
+  margin-bottom: 4px;
+  background-color: black;
+  border: 1px solid red;
+  color: white;
+  transition-property: all;
+  transition-duration: 7s;
 }
-.parent > div.box1{
-    width: 90vw;
-    min-width: 24em;
-    background-color: magenta;
-    color: yellow;
-    border: 1px solid orange;
-    transition-property: all;
-    transition-duration:2s;
+.parent > div.box1 {
+  width: 90vw;
+  min-width: 24em;
+  background-color: magenta;
+  color: yellow;
+  border: 1px solid orange;
+  transition-property: all;
+  transition-duration: 2s;
 }
 ```
 
 ```js hidden
 function updateTransition() {
   var els = document.querySelectorAll(".parent > div[class]");
-  for(var c = els.length, i = 0; i < c; i++) {
-     els[i].classList.toggle("box1");
+  for (var c = els.length, i = 0; i < c; i++) {
+    els[i].classList.toggle("box1");
   }
 }
 
@@ -223,22 +225,22 @@ var intervalID = window.setInterval(updateTransition, 10000);
 
 ```css
 .jump-start {
-   transition-timing-function: steps(5, jump-start);
+  transition-timing-function: steps(5, jump-start);
 }
 .jump-end {
-   transition-timing-function: steps(5, jump-end);
+  transition-timing-function: steps(5, jump-end);
 }
 .jump-none {
-   transition-timing-function: steps(5, jump-none);
+  transition-timing-function: steps(5, jump-none);
 }
 .jump-both {
-   transition-timing-function: steps(5, jump-both);
+  transition-timing-function: steps(5, jump-both);
 }
 .step-start {
-   transition-timing-function: step-start;
+  transition-timing-function: step-start;
 }
 .step-end {
-   transition-timing-function: step-end;
+  transition-timing-function: step-end;
 }
 ```
 
diff --git a/files/fr/web/css/transition/index.md b/files/fr/web/css/transition/index.md
index 93ca099bdc653f..0be283185fa0f8 100644
--- a/files/fr/web/css/transition/index.md
+++ b/files/fr/web/css/transition/index.md
@@ -29,7 +29,9 @@ transition: margin-right 4s ease-in-out;
 transition: margin-right 4s ease-in-out 1s;
 
 /* S'applique à deux propriétés */
-transition: margin-right 4s, color 1s;
+transition:
+  margin-right 4s,
+  color 1s;
 
 /* S'applique à toutes les propriétés modifiées */
 transition: all 0.5s ease-out;
diff --git a/files/fr/web/css/universal_selectors/index.md b/files/fr/web/css/universal_selectors/index.md
index 482d1f5327e302..2370abd6f21597 100644
--- a/files/fr/web/css/universal_selectors/index.md
+++ b/files/fr/web/css/universal_selectors/index.md
@@ -33,12 +33,12 @@ L'astérisque est optionnelle lorsqu'elle est utilisée avec des sélecteurs sim
 ### CSS
 
 ```css
-* [lang^=fr] {
-  color:green;
+* [lang^="fr"] {
+  color: green;
 }
 
 *.warning {
-  color:red;
+  color: red;
 }
 
 *#maincontent {
diff --git a/files/fr/web/css/url/index.md b/files/fr/web/css/url/index.md
index a12a5333ac82a3..b801d4710cc53e 100644
--- a/files/fr/web/css/url/index.md
+++ b/files/fr/web/css/url/index.md
@@ -6,7 +6,7 @@ translation_of: Web/CSS/url()
 
 {{CSSRef}}
 
-La fonction [CSS](/fr/docs/Web/CSS) **`url()`** est utilisée afin d'inclure un fichier. Le paramètre est une URL absolue, une URL relative ou un URI de donnée. La fonction **`url()`** peut être utilisée comme paramètre d'une autre fonction comme [`attr()`](/fr/docs/Web/CSS/attr()). Selon la propriété pour laquelle elle est utilisée, la ressource utilisée peut être une image, une police ou une feuille de style.
+La fonction [CSS](/fr/docs/Web/CSS) **`url()`** est utilisée afin d'inclure un fichier. Le paramètre est une URL absolue, une URL relative ou un URI de donnée. La fonction **`url()`** peut être utilisée comme paramètre d'une autre fonction comme [`attr()`](). Selon la propriété pour laquelle elle est utilisée, la ressource utilisée peut être une image, une police ou une feuille de style.
 
 La notation fonctionnelle `url()` correspond au type de donnée CSS ``.
 
@@ -93,7 +93,7 @@ url(  * )
 
 ```css
 .topbanner {
-  background: url("banniere_haut.png") #00D no-repeat fixed;
+  background: url("banniere_haut.png") #00d no-repeat fixed;
 }
 ```
 
@@ -121,7 +121,7 @@ ul {
 
 ```css
 li::after {
-  content: ' - ' url(star.gif);
+  content: " - " url(star.gif);
 }
 ```
 
@@ -186,7 +186,7 @@ Lorsqu'une URL est utilisée comme chemin d'un filtre, l'URL doit être :
 ## Voir aussi
 
 - [``](/fr/docs/Web/CSS/gradient)
-- [`element()`](/fr/docs/Web/CSS/element())
-- [`image()`](/fr/docs/Web/CSS/image/image())
-- [`image-set()`](/fr/docs/Web/CSS/image/image-set())
-- [`cross-fade()`](/fr/docs/Web/CSS/cross-fade())
+- [`element()`]()
+- [`image()`]()
+- [`image-set()`]()
+- [`cross-fade()`]()
diff --git a/files/fr/web/css/used_value/index.md b/files/fr/web/css/used_value/index.md
index 58fecfce48ce07..9e66a7d6870c6f 100644
--- a/files/fr/web/css/used_value/index.md
+++ b/files/fr/web/css/used_value/index.md
@@ -83,7 +83,7 @@ div {
 ```js
 function updateUsedWidth(id) {
   var div = document.querySelector(`#${id}`);
-  var par = div.querySelector('.show-used-width');
+  var par = div.querySelector(".show-used-width");
   var wid = window.getComputedStyle(div)["width"];
   par.textContent = `Used width: ${wid}.`;
 }
@@ -95,7 +95,7 @@ function updateAllUsedWidths() {
 }
 
 updateAllUsedWidths();
-window.addEventListener('resize', updateAllUsedWidths);
+window.addEventListener("resize", updateAllUsedWidths);
 ```
 
 ### Résultat
diff --git a/files/fr/web/css/user-select/index.md b/files/fr/web/css/user-select/index.md
index 3d63af2a48ecf5..d4be6a9534f294 100644
--- a/files/fr/web/css/user-select/index.md
+++ b/files/fr/web/css/user-select/index.md
@@ -92,7 +92,9 @@ user-select: unset;
 ```html
 
    Vous devriez pouvoir sélectionner ce texte.
    
 
    Hop, vous ne pouvez pas sélectionner ce texte !
    
-
    Cliquer une fois permettra de sélectionner l'ensemble du texte.
    
+
    
+  Cliquer une fois permettra de sélectionner l'ensemble du texte.
+
    
 ```
 
 ### Résultat
diff --git a/files/fr/web/css/using_css_custom_properties/index.md b/files/fr/web/css/using_css_custom_properties/index.md
index 28605a48c53d58..dc88cfd83d7e96 100644
--- a/files/fr/web/css/using_css_custom_properties/index.md
+++ b/files/fr/web/css/using_css_custom_properties/index.md
@@ -93,10 +93,10 @@ Appliquons-le à ce code HTML :
 
 ```html
 
    
-    
    Toto
    
-    
    Texte - encore du texte
    
-    
-    
+  
    Toto
    
+  
    Texte - encore du texte
    
+  
+  
 
    
 ```
 
@@ -150,10 +150,10 @@ Remarquez la répétition dans le CSS. La couleur d'arrière-plan est définie 
 
 ```html hidden
 
    
-    
    Toto
    
-    
    Text - more text
    
-    
-    
+  
    Toto
    
+  
    Text - more text
    
+  
+  
 
    
 ```
 
@@ -166,10 +166,8 @@ Il y a un héritage des propriétés personnalisées. Cela signifie que si une p
 ```html
 
    
   
    
-    
    
-    
    
-    
    
-    
    
+    
    
+    
    
   
    
 
    
 ```
@@ -243,9 +241,15 @@ Lorsque le navigateur analyse une substitution `var()` invalide, c'est la valeur
 ### CSS
 
 ```css
-:root { --text-color: 16px; }
-p { color: blue; }
-p { color: var(--text-color); }
+:root {
+  --text-color: 16px;
+}
+p {
+  color: blue;
+}
+p {
+  color: var(--text-color);
+}
 ```
 
 Comme on pourrait s'y attendre, la valeur applique la substitution avec `--text-color` à la place de `var(--text-color)` mais `16px` n'est pas une valeur valide pour {{cssxref("color")}}. Après la substitution, la déclaration n'a plus aucun sens. Le navigateur résoud ce problème en deux étapes :
diff --git a/files/fr/web/css/var/index.md b/files/fr/web/css/var/index.md
index 06a8191c3f8474..ae95200007df4e 100644
--- a/files/fr/web/css/var/index.md
+++ b/files/fr/web/css/var/index.md
@@ -32,7 +32,7 @@ Le premier argument de la fonction est le nom de la propriété qu'on veut subst
 ## Exemples
 
 ```css
-:root{
+:root {
   --main-bg-color: pink;
 }
 
diff --git a/files/fr/web/css/vertical-align/index.md b/files/fr/web/css/vertical-align/index.md
index e42438501b3172..fb328c69fe13bb 100644
--- a/files/fr/web/css/vertical-align/index.md
+++ b/files/fr/web/css/vertical-align/index.md
@@ -108,22 +108,39 @@ Pour les éléments qui n'ont pas de ligne de base définie, c'est le bord de la
 #### HTML
 
 ```html
-
    Une link image avec
- un alignement par défaut.
    
-
    Une link image avec
- un alignement en haut du texte.
    
-
    Une link image avec
- un alignement en bas du texte.
    
-
    Une link image avec
- un alignement au milieu.
    
+
    
+  Une link image avec
+  un alignement par défaut.
+
    
+
    
+  Une
+  link
+  image avec un alignement en haut du texte.
+
    
+
    
+  Une
+  link
+  image avec un alignement en bas du texte.
+
    
+
    
+  Une
+  link
+  image avec un alignement au milieu.
+
    
 ```
 
 #### CSS
 
 ```css
-img.top { vertical-align: text-top; }
-img.bottom { vertical-align: text-bottom; }
-img.middle { vertical-align: middle; }
+img.top {
+  vertical-align: text-top;
+}
+img.bottom {
+  vertical-align: text-bottom;
+}
+img.middle {
+  vertical-align: middle;
+}
 ```
 
 #### Résultat
@@ -136,20 +153,20 @@ img.middle { vertical-align: middle; }
 
 ```html
 
    
-top:         
-middle:      
-bottom:      
-super:       
-sub:         
+  top:  middle:
+   bottom:
+   super:
+   sub:
+  
 
    
 
 
    
-text-top:    
-text-bottom: 
-0.2em:       
--1em:        
-20%:         
--100%:       
+  text-top:  text-bottom:
+   0.2em:
+   -1em:
+   20%:
+   -100%:
+  
 
    
 ```
 
@@ -164,7 +181,7 @@ img {
 
 p {
   height: 3em;
-  padding: 0 .5em;
+  padding: 0 0.5em;
   font-family: monospace;
   text-decoration: underline overline;
   margin-left: auto;
@@ -189,14 +206,17 @@ p {
middle bottom -

Elle voulait savoir si elle grandissait ou rapetissait, et fut - tout étonnée de rester la même; franchement, c'est ce qui - arrive le plus souvent lorsqu'on mange du gâteau; mais Alice - avait tellement pris l'habitude de s'attendre à des choses - extraordinaires, que cela lui paraissait ennuyeux et stupide - de vivre comme tout le monde.

-

Aussi elle se remit à l'œuvre, et eut bien vite fait - disparaître le gâteau.

+

+ Elle voulait savoir si elle grandissait ou rapetissait, et fut tout + étonnée de rester la même; franchement, c'est ce qui arrive le plus + souvent lorsqu'on mange du gâteau; mais Alice avait tellement pris + l'habitude de s'attendre à des choses extraordinaires, que cela lui + paraissait ennuyeux et stupide de vivre comme tout le monde. +

+

+ Aussi elle se remit à l'œuvre, et eut bien vite fait disparaître le + gâteau. +

@@ -211,7 +231,9 @@ table { width: 80%; } -table, th, td { +table, +th, +td { border: 1px solid black; } diff --git a/files/fr/web/css/viewport_concepts/index.md b/files/fr/web/css/viewport_concepts/index.md index b1d7c63086eafb..44d68b96601ecf 100644 --- a/files/fr/web/css/viewport_concepts/index.md +++ b/files/fr/web/css/viewport_concepts/index.md @@ -26,15 +26,15 @@ Pour résumer, la zone d'affichage est la zone du document actuellement visible La largeur de la zone d'affichage n'est pas toujours la largeur de la fenêtre. Si vous accédez à la largeur et à la hauteur de la fenêtre et à celles du document avec Chrome ou Firefox, vous pourrez obtenir un résultat comme celui-ci : ```js -document.documentElement.clientWidth /* 1200 */ -window.innerWidth /* 1200 */ -window.outerWidth /* 1200 */ +document.documentElement.clientWidth; /* 1200 */ +window.innerWidth; /* 1200 */ +window.outerWidth; /* 1200 */ ``` ```js -document.documentElement.clientHeight /* 800 */ -window.innerHeight /* 800 */ -window.outerHeight /* 900 */ +document.documentElement.clientHeight; /* 800 */ +window.innerHeight; /* 800 */ +window.outerHeight; /* 900 */ ``` Il existe plusieurs propriétés du DOM qui permettent d'obtenir la taille de la zone d'affichage et certaines dimensions associées : @@ -50,15 +50,15 @@ La zone contenu entre `innerHeight` et `innerWidth` correspond à **la zone d'af Lorsqu'on zoome, FIrefox et Chrome renvoient une nouvelle taille, en pixels CSS, pour `innerWidth` et `clientWidth`. Les valeurs renvoyées pour `outerWidth` et `outerHeight` dépendent du navigateur : Firefox rapporte la nouvelle valeur en pixels CSS et Chrome renvoie la longueur exprimée avec la taille par défaut d'un pixel. Lorsqu'on a zoomé, on pourra obtenir : ```js -document.documentElement.clientWidth /* 800 */ -window.innerWidth /* 800 */ -window.outerWidth /* 800 dans Firefox, 1200 dans Chrome */ +document.documentElement.clientWidth; /* 800 */ +window.innerWidth; /* 800 */ +window.outerWidth; /* 800 dans Firefox, 1200 dans Chrome */ ``` ```js -document.documentElement.clientHeight /* 533 */ -window.innerHeight /* 533 */ -window.outerHeight /* 596 dans Firefox, 900 dans Chrome */ +document.documentElement.clientHeight; /* 533 */ +window.innerHeight; /* 533 */ +window.outerHeight; /* 596 dans Firefox, 900 dans Chrome */ ``` La zone d'affichage mesurait initialement 1200 x 800 pixels. Après le zoom, la zone d'affichage mesure 800 x 533 pixels. C'est la zone d'affichage pour la disposition. Avec la feuille de style suivante, les hauts et pieds de page seront placés en haut et en bas de _la zone d'affichage pour la disposition_. @@ -147,7 +147,7 @@ L'API [Visual Viewport](/fr/docs/Web/API/Visual_Viewport_API) fournit des outils Il existe une grande variété de tailles et de proportions pour les appareils mobiles. La zone d'affichage d'un navigateur mobile est la zone de la fenêtre sur laquelle le contenu web peut être consulté et cette zone n'a pas nécessairement la même taille que la page affichée. Les navigateurs mobiles affichent les pages sur une zone d'affichage virtuelle (mesurant généralement 960px) plus large que l'écran puis réduisent le résultat afin que l'utilisateur puisse voir l'ensemle du document. L'utilisateur peut alors se déplacer ou zoomer au doigt pour accéder aux différentes zones de la page. Ainsi, si un appareil mobile a un écran large de 320px, un site web pourra être affiché selon une zone d'affichage virtuelle sur 960px puis réduit afin de pouvoir s'inscrire dans l'espace large de 320px. Le résultat ainsi obtenu risque peu d'être lisible. Pour indiquer à un navigateur mobile d'utiliser la largeur de la zone d'affichage réelle plutôt que la largeur virtuelle de 960px, on pourra placer la balise `` suivante : ```html - + ``` La propriété `width` contrôle la taille de la zone d'affichage et on l'utilisera généralement avec `device-width` qui correspond à la largeur de l'écran, exprimée en pixels CSS, avec un zoom de 100%. Il est possible d'utiliser d'autres propriétés comme `maximum-scale`, `minimum-scale` et `user-scalable` afin de contrôler si l'utilisateur peut zoomer/dézoomer sur la page mais les valeurs par défaut restent les meilleures en termes d'accessibilité et d'ergonomie et ne seront pas plus abordées ici par souci de concision. diff --git a/files/fr/web/css/visibility/index.md b/files/fr/web/css/visibility/index.md index 6602a81e6fde36..776238476531de 100644 --- a/files/fr/web/css/visibility/index.md +++ b/files/fr/web/css/visibility/index.md @@ -63,16 +63,12 @@ Les valeurs de visibilité peuvent être interpolées entre _visible_ et _masqu ```html

- On peut dire tout ce qu'on veut ici, - ce ne sera pas lisible de toute façon. + On peut dire tout ce qu'on veut ici, ce ne sera pas lisible de toute façon.

- Alors que là, on a la bonne classe. - Coucou tout le monde :) -

-

- Et on repasse en mode invisible. + Alors que là, on a la bonne classe. Coucou tout le monde :)

+

Et on repasse en mode invisible.

``` #### CSS diff --git a/files/fr/web/css/visual_formatting_model/index.md b/files/fr/web/css/visual_formatting_model/index.md index 45e37687a981b8..c3cc6a26398ca2 100644 --- a/files/fr/web/css/visual_formatting_model/index.md +++ b/files/fr/web/css/visual_formatting_model/index.md @@ -48,14 +48,14 @@ Si on prend le code HTML suivant, mis en forme avec les règles par défaut (`di ```html
- Some inline text -

followed by a paragraph

- followed by more inline text. + Some inline text +

followed by a paragraph

+ followed by more inline text.
``` On aura deux boîtes de bloc anonymes qui seront créées : une pour le texte avant le paragraphe et une pour le texte après. On aura alors la structure suivante : - ![anonymous_block-level_boxes.png](anonymous_block-level_boxes.png) +![anonymous_block-level_boxes.png](anonymous_block-level_boxes.png) À la différence de la boîte des éléments {{HTMLElement("p")}}, les développeurs ne peuvent pas contrôler la mise en forme des boîtes anonymes. Les propriétés qui héritent des éléments parents récupèreront la valeur obtenue pour l'élément {{HTMLElement("div")}} et les autres propriétés auront la valeur `initial`. @@ -89,26 +89,25 @@ Les boîtes en lignes atomiques ne peuvent pas être divisées en plusieurs lign
- Le texte dans le span peut être divisé - en plusieurs lignes dans une boîte en - ligne. + Le texte dans le span peut être divisé en plusieurs lignes dans + une boîte en ligne.
``` ```html
- Le texte dans le span ne peut pas être - divisé en plusieurs lignes car il est - dans une boîte de type inline-block. + Le texte dans le span + ne peut pas être divisé en plusieurs lignes car il est dans une + boîte de type inline-block.
``` diff --git a/files/fr/web/css/white-space/index.md b/files/fr/web/css/white-space/index.md index 5a88b9c423cad5..ed9bb8b8ffa285 100644 --- a/files/fr/web/css/white-space/index.md +++ b/files/fr/web/css/white-space/index.md @@ -120,17 +120,9 @@ Le tableau qui suit résume le comportement des différentes valeurs : ```html -var coucou = function(){ - // on notera l'indentation - // avec deux espaces - console.log("Hello World"); - - var toto = function(){ - // ici 4 espaces - console.log("Toto"); - } - toto(); -} + var coucou = function(){ // on notera l'indentation // avec deux espaces + console.log("Hello World"); var toto = function(){ // ici 4 espaces + console.log("Toto"); } toto(); } ``` @@ -162,8 +154,8 @@ function jeNAuraisJamaisDuAppelerCetteFonctionAvecUnNomAussiLong(toto){ ```css pre { - word-wrap: break-word; /* IE 5.5-7 */ - white-space: pre-wrap; /* current browsers */ + word-wrap: break-word; /* IE 5.5-7 */ + white-space: pre-wrap; /* current browsers */ } ``` diff --git a/files/fr/web/css/widows/index.md b/files/fr/web/css/widows/index.md index 1c7750f7211a50..512254a6b94715 100644 --- a/files/fr/web/css/widows/index.md +++ b/files/fr/web/css/widows/index.md @@ -62,8 +62,13 @@ p:first-child { ```html

Un premier paragraphe avec un peu de texte.

-

Un deuxième paragraphe avec un peu plus de texte et qui permet d'illustrer le fonctionnement de widows.

-

Enfin, un troisième paragraphe avec un peu plus de texte que le premier.

+

+ Un deuxième paragraphe avec un peu plus de texte et qui permet d'illustrer + le fonctionnement de widows. +

+

+ Enfin, un troisième paragraphe avec un peu plus de texte que le premier. +

``` diff --git a/files/fr/web/css/width/index.md b/files/fr/web/css/width/index.md index 37ff5aca763d6f..2cf8e758e06d8a 100644 --- a/files/fr/web/css/width/index.md +++ b/files/fr/web/css/width/index.md @@ -141,8 +141,8 @@ p.goldie { ```css p.maxgreen { background: lightgreen; - width: intrinsic; /* Safari/WebKit utilisent un nom non-standard */ - width: -moz-max-content; /* Firefox/Gecko */ + width: intrinsic; /* Safari/WebKit utilisent un nom non-standard */ + width: -moz-max-content; /* Firefox/Gecko */ width: -webkit-max-content; /* Chrome */ } ``` @@ -158,7 +158,7 @@ p.maxgreen { ```css p.minblue { background: lightblue; - width: -moz-min-content; /* Firefox */ + width: -moz-min-content; /* Firefox */ width: -webkit-min-content; /* Chrome */ } ``` @@ -174,7 +174,7 @@ p.minblue { Il faut s'assurer que les éléments sur lesquels on utilise `width` ne sont pas tronqués et ne masquent pas d'autre contenu sur la page lorsque l'utilisateur zoome afin d'agrandir la taille du texte. - [Comprendre les règles WCAG 1.4](/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) -- [_Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) +- [_Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) ## Spécifications diff --git a/files/fr/web/css/will-change/index.md b/files/fr/web/css/will-change/index.md index b464fb866d8281..5025f9b7b82f39 100644 --- a/files/fr/web/css/will-change/index.md +++ b/files/fr/web/css/will-change/index.md @@ -15,9 +15,9 @@ La propriété **`will-change`** fournit une indication au navigateur sur la pro will-change: auto; will-change: scroll-position; will-change: contents; -will-change: transform; /* Exemple de */ -will-change: opacity; /* Exemple de */ -will-change: left, top; /* Exemple de deux */ +will-change: transform; /* Exemple de */ +will-change: opacity; /* Exemple de */ +will-change: left, top; /* Exemple de deux */ /* Valeurs globales */ will-change: inherit; @@ -68,21 +68,21 @@ Un valeur de type `` peut être : Dans l'exemple précédent, on applique la propriété `will-change` à même la feuille de style. Dans ce cas, le navigateur conservera l'optimisation en mémoire beaucoup plus longtemps que nécessaire. Nous avons vu précédemment que cela devait être évité et voici donc un deuxième exemple qui illustre comment appliquer la propriété `will-change` grâce à JavaScript (et qui correspond donc à la méthode qui devrait être utilisée la plupart du temps) : ```js -var el = document.getElementById('element'); +var el = document.getElementById("element"); // On applique will-change quand la souris/curseur // pointeur/stylet passe au-dessus de l'élément -el.addEventListener('mouseenter', hintBrowser); -el.addEventListener('animationEnd', removeHint); +el.addEventListener("mouseenter", hintBrowser); +el.addEventListener("animationEnd", removeHint); function hintBrowser() { // On liste les propriétés sujettes au changement // lors de l'animation - this.style.willChange = 'transform, opacity'; + this.style.willChange = "transform, opacity"; } function removeHint() { - this.style.willChange = 'auto'; + this.style.willChange = "auto"; } ``` diff --git a/files/fr/web/css/word-break/index.md b/files/fr/web/css/word-break/index.md index dcf74662e46801..22d1d0d3976fc4 100644 --- a/files/fr/web/css/word-break/index.md +++ b/files/fr/web/css/word-break/index.md @@ -54,24 +54,32 @@ La propriété `word-break` est définie avec un mot-clé parmi ceux décrits ci ```html

1. word-break: normal

-

This is a long and - Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu - グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉

+

+ This is a long and Honorificabilitudinitatibus califragilisticexpialidocious + Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 +

2. word-break: break-all

-

This is a long and - Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu - グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉

+

+ This is a long and Honorificabilitudinitatibus califragilisticexpialidocious + Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 +

3. word-break: keep-all

-

This is a long and - Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu - グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉

+

+ This is a long and Honorificabilitudinitatibus califragilisticexpialidocious + Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 +

4. word-break: break-word

-

This is a long and - Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu - グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉

+

+ This is a long and Honorificabilitudinitatibus califragilisticexpialidocious + Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu + グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉 +

``` ### CSS diff --git a/files/fr/web/css/word-spacing/index.md b/files/fr/web/css/word-spacing/index.md index 918ab09157dfef..ebf6367629120a 100644 --- a/files/fr/web/css/word-spacing/index.md +++ b/files/fr/web/css/word-spacing/index.md @@ -54,8 +54,8 @@ word-spacing: unset; ### HTML ```html -

Voici le texte de la ligne 1

-

Et voilà celui de la ligne 2

+

Voici le texte de la ligne 1

+

Et voilà celui de la ligne 2

``` ### CSS diff --git a/files/fr/web/css/writing-mode/index.md b/files/fr/web/css/writing-mode/index.md index b9b27921f88ff8..909dfadf6435cb 100644 --- a/files/fr/web/css/writing-mode/index.md +++ b/files/fr/web/css/writing-mode/index.md @@ -68,42 +68,43 @@ Ce fragment de code HTML contient un tableau ({{HTMLElement("table")}}) dont cha ```html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValeurSystème d'écriture verticalSystème d'écriture horizontalSystème d'écriture hybride
horizontal-tb我家没有电脑。Example text1994年に至っては
vertical-lr我家没有电脑。Example text1994年に至っては
vertical-rl我家没有电脑。Example text1994年に至っては
sideways-lr我家没有电脑。Example text1994年に至っては
sideways-rl我家没有电脑。Example text1994年に至っては
ValeurSystème d'écriture verticalSystème d'écriture horizontalSystème d'écriture hybride
horizontal-tb我家没有电脑。Example text1994年に至っては
vertical-lr我家没有电脑。Example text1994年に至っては
vertical-rl我家没有电脑。Example text1994年に至っては
sideways-lr我家没有电脑。Example text1994年に至っては
sideways-rl我家没有电脑。Example text1994年に至っては
``` ### CSS @@ -112,11 +113,13 @@ Cette première partie permet uniquement de rendre les choses plus agréables à ```css table { - border-collapse:collapse; + border-collapse: collapse; } -td, th { - border: 1px black solid; padding: 3px; +td, +th { + border: 1px black solid; + padding: 3px; } th { background-color: lightgray; @@ -126,31 +129,36 @@ th { Ensuite, on ajoute la direction du contenu pour chaque cellule du tableau : ```css -.example.Text1 span, .example.Text1 { +.example.Text1 span, +.example.Text1 { writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; } -.example.Text2 span, .example.Text2 { +.example.Text2 span, +.example.Text2 { writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; } -.example.Text3 span, .example.Text3 { +.example.Text3 span, +.example.Text3 { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; } -.example.Text4 span, .example.Text4 { +.example.Text4 span, +.example.Text4 { writing-mode: sideways-lr; -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; } -.example.Text5 span, .example.Text5 { +.example.Text5 span, +.example.Text5 { writing-mode: sideways-rl; -webkit-writing-mode: sideways-rl; -ms-writing-mode: sideways-rl; From 23ea74fe6c9184a71441ee99828b044fca5cce49 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Wed, 26 Jul 2023 23:44:28 -0700 Subject: [PATCH 29/31] fr: Format /web/css using Prettier (part 4) (#14629) * fr: Format /web/css using Prettier (part 4) * Undo .prettierignore changes --- files/fr/web/css/border-left-style/index.md | 45 ++- files/fr/web/css/border-left-width/index.md | 18 +- files/fr/web/css/border-left/index.md | 11 +- files/fr/web/css/border-radius/index.md | 12 +- files/fr/web/css/border-right-color/index.md | 7 +- files/fr/web/css/border-right-style/index.md | 45 ++- files/fr/web/css/border-right-width/index.md | 18 +- files/fr/web/css/border-right/index.md | 11 +- .../css/border-start-start-radius/index.md | 14 +- files/fr/web/css/border-style/index.md | 4 +- files/fr/web/css/border-top-color/index.md | 7 +- .../web/css/border-top-left-radius/index.md | 8 +- .../web/css/border-top-right-radius/index.md | 8 +- files/fr/web/css/border-top-style/index.md | 45 ++- files/fr/web/css/border-top-width/index.md | 18 +- files/fr/web/css/border-top/index.md | 3 +- files/fr/web/css/border-width/index.md | 19 +- files/fr/web/css/border/index.md | 7 +- files/fr/web/css/bottom/index.md | 26 +- files/fr/web/css/box-align/index.md | 2 +- .../fr/web/css/box-decoration-break/index.md | 18 +- files/fr/web/css/box-direction/index.md | 4 +- files/fr/web/css/box-orient/index.md | 16 +- files/fr/web/css/box-pack/index.md | 4 +- files/fr/web/css/box-shadow/index.md | 10 +- files/fr/web/css/box-sizing/index.md | 2 +- files/fr/web/css/break-after/index.md | 21 +- files/fr/web/css/break-before/index.md | 29 +- files/fr/web/css/break-inside/index.md | 21 +- files/fr/web/css/calc/index.md | 6 +- files/fr/web/css/caption-side/index.md | 10 +- files/fr/web/css/cascade/index.md | 84 ++--- files/fr/web/css/child_combinator/index.md | 5 +- files/fr/web/css/clamp/index.md | 4 +- files/fr/web/css/class_selectors/index.md | 7 +- files/fr/web/css/clear/index.md | 55 ++-- files/fr/web/css/clip-path/index.md | 5 +- files/fr/web/css/clip/index.md | 14 +- files/fr/web/css/color/index.md | 22 +- files/fr/web/css/color_value/index.md | 28 +- files/fr/web/css/column-count/index.md | 18 +- files/fr/web/css/column-fill/index.md | 18 +- files/fr/web/css/column-gap/index.md | 5 +- files/fr/web/css/column-rule-color/index.md | 18 +- files/fr/web/css/column-rule-style/index.md | 20 +- files/fr/web/css/column-rule-width/index.md | 20 +- files/fr/web/css/column-rule/index.md | 8 +- files/fr/web/css/column-span/index.md | 21 +- files/fr/web/css/column-width/index.md | 7 +- files/fr/web/css/column_combinator/index.md | 16 +- files/fr/web/css/columns/index.md | 19 +- files/fr/web/css/comments/index.md | 1 - files/fr/web/css/containing_block/index.md | 36 +-- files/fr/web/css/content/index.md | 42 ++- files/fr/web/css/counter/index.md | 10 +- files/fr/web/css/counters/index.md | 76 ++--- files/fr/web/css/cross-fade/index.md | 18 +- files/fr/web/css/css_animations/tips/index.md | 34 ++- .../using_css_animations/index.md | 42 +-- .../resizing_background_images/index.md | 3 +- .../using_multiple_backgrounds/index.md | 10 +- .../mastering_margin_collapsing/index.md | 26 +- .../css/css_colors/applying_color/index.md | 54 ++-- .../using_css_counters/index.md | 14 +- .../typical_use_cases_of_flexbox/index.md | 2 +- .../index.md | 2 +- files/fr/web/css/css_fonts/index.md | 8 +- .../css_fonts/opentype_fonts_guide/index.md | 14 +- .../css_fonts/variable_fonts_guide/index.md | 70 ++--- .../auto-placement_in_grid_layout/index.md | 110 ++++--- .../basic_concepts_of_grid_layout/index.md | 27 +- .../box_alignment_in_grid_layout/index.md | 48 ++- .../grid_layout_and_accessibility/index.md | 4 +- .../index.md | 123 +++++--- .../index.md | 82 +++-- .../index.md | 66 ++-- .../grid_template_areas/index.md | 57 ++-- .../index.md | 56 +++- files/fr/web/css/css_grid_layout/index.md | 8 +- .../index.md | 202 +++++++----- .../index.md | 69 +++-- .../index.md | 2 +- .../css_images/using_css_gradients/index.md | 288 ++++++++++++------ .../consistent_list_indentation/index.md | 3 +- .../floating_and_positioning/index.md | 32 +- .../margins_borders_padding/index.md | 86 +++--- .../sizing/index.md | 16 +- .../using_media_queries/index.md | 62 ++-- .../index.md | 8 +- .../using_multicol_layouts/index.md | 61 ++-- .../stacking_context/index.md | 40 ++- .../stacking_context_example_1/index.md | 25 +- .../stacking_context_example_2/index.md | 25 +- .../stacking_context_example_3/index.md | 10 +- .../stacking_floating_elements/index.md | 15 +- .../stacking_without_z-index/index.md | 15 +- .../using_z-index/index.md | 15 +- .../web/css/css_scrollbars_styling/index.md | 8 +- .../index.md | 8 +- 99 files changed, 1684 insertions(+), 1212 deletions(-) diff --git a/files/fr/web/css/border-left-style/index.md b/files/fr/web/css/border-left-style/index.md index 566deff9166daf..b32887c45056ab 100644 --- a/files/fr/web/css/border-left-style/index.md +++ b/files/fr/web/css/border-left-style/index.md @@ -75,23 +75,44 @@ La propriété `border-left-style` se définit avec l'un des mots-clés utilisé /* On applique un style sur le tableau */ table { border-width: 2px; - background-color: #52E385; + background-color: #52e385; } -tr, td { +tr, +td { padding: 3px; } /* Des exemples pour border-left-style */ -.b1 {border-left-style: none;} -.b2 {border-left-style: hidden;} -.b3 {border-left-style: dotted;} -.b4 {border-left-style: dashed;} -.b5 {border-left-style: solid;} -.b6 {border-left-style: double;} -.b7 {border-left-style: groove;} -.b8 {border-left-style: ridge;} -.b9 {border-left-style: inset;} -.b10 {border-left-style: outset;} +.b1 { + border-left-style: none; +} +.b2 { + border-left-style: hidden; +} +.b3 { + border-left-style: dotted; +} +.b4 { + border-left-style: dashed; +} +.b5 { + border-left-style: solid; +} +.b6 { + border-left-style: double; +} +.b7 { + border-left-style: groove; +} +.b8 { + border-left-style: ridge; +} +.b9 { + border-left-style: inset; +} +.b10 { + border-left-style: outset; +} ``` ### Résultat diff --git a/files/fr/web/css/border-left-width/index.md b/files/fr/web/css/border-left-width/index.md index 3919851276f153..0ba5fbeec95361 100644 --- a/files/fr/web/css/border-left-width/index.md +++ b/files/fr/web/css/border-left-width/index.md @@ -55,17 +55,17 @@ border-left-width: unset; ### CSS ```css -.element1{ +.element1 { border-left-width: thick; border-left-style: solid; border-left-color: red; } -.element2{ +.element2 { border-left-width: medium; border-left-style: solid; border-left-color: orange; } -.element3{ +.element3 { border-left-width: thin; border-left-style: solid; border-left-color: green; @@ -75,17 +75,11 @@ border-left-width: unset; ### HTML ```html -

- Une bordure épaisse rouge. -

+

Une bordure épaisse rouge.

-

- Une bordure moyenne orange. -

+

Une bordure moyenne orange.

-

- Et une bordure fine verte. -

+

Et une bordure fine verte.

``` ### Résultat diff --git a/files/fr/web/css/border-left/index.md b/files/fr/web/css/border-left/index.md index 9a029a5b566a30..517f27ebdb42d9 100644 --- a/files/fr/web/css/border-left/index.md +++ b/files/fr/web/css/border-left/index.md @@ -23,15 +23,15 @@ Ces propriétés permettent de décrire la bordure du côté gauche d'un éléme > Comme pour les autres propriétés raccourcies, `border-left` définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi : > > ```css -> border-left-style: dotted; -> border-left: thick green; +> border-left-style: dotted; +> border-left: thick green; > ``` > > est équivalent à : > > ```css -> border-left-style: dotted; -> border-left: none thick green; +> border-left-style: dotted; +> border-left: none thick green; > ``` > > et la valeur {{cssxref("border-left-style")}} fournie avant `border-left` est ignorée. @@ -77,8 +77,7 @@ border-left: medium dashed green; ```html

- En passant elle prit sur un rayon un pot - de confiture portant cette étiquette, + En passant elle prit sur un rayon un pot de confiture portant cette étiquette, « MARMELADE D’ORANGES. »

``` diff --git a/files/fr/web/css/border-radius/index.md b/files/fr/web/css/border-radius/index.md index 650f813eb0087c..a15fde0b5e487a 100644 --- a/files/fr/web/css/border-radius/index.md +++ b/files/fr/web/css/border-radius/index.md @@ -154,10 +154,10 @@ border-radius: 1em / 5em; /* est équivalent à : */ -border-top-left-radius: 1em 5em; -border-top-right-radius: 1em 5em; +border-top-left-radius: 1em 5em; +border-top-right-radius: 1em 5em; border-bottom-right-radius: 1em 5em; -border-bottom-left-radius: 1em 5em; +border-bottom-left-radius: 1em 5em; ``` ```css @@ -165,10 +165,10 @@ border-radius: 4px 3px 6px / 2px 4px; /* est équivalent à : */ -border-top-left-radius: 4px 2px; -border-top-right-radius: 3px 4px; +border-top-left-radius: 4px 2px; +border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; -border-bottom-left-radius: 3px 4px; +border-bottom-left-radius: 3px 4px; ``` ## Définition formelle diff --git a/files/fr/web/css/border-right-color/index.md b/files/fr/web/css/border-right-color/index.md index ab049fa097f151..88e1573fc44e15 100644 --- a/files/fr/web/css/border-right-color/index.md +++ b/files/fr/web/css/border-right-color/index.md @@ -60,9 +60,10 @@ border-right-color: unset; ```html
-

Une boîte avec une bordure autour. - Notez le côté de la boîte qui est - rouge.

+

+ Une boîte avec une bordure autour. Notez le côté de la boîte qui est + rouge. +

``` diff --git a/files/fr/web/css/border-right-style/index.md b/files/fr/web/css/border-right-style/index.md index 106238b0702d1d..345c7b6f04d644 100644 --- a/files/fr/web/css/border-right-style/index.md +++ b/files/fr/web/css/border-right-style/index.md @@ -75,23 +75,44 @@ La propriété `border-right-style` se définit avec l'un des mots-clés utilis /* On applique un style sur le tableau */ table { border-width: 2px; - background-color: #52E385; + background-color: #52e385; } -tr, td { +tr, +td { padding: 3px; } /* Des exemples pour border-right-style */ -.b1 {border-right-style: none;} -.b2 {border-right-style: hidden;} -.b3 {border-right-style: dotted;} -.b4 {border-right-style: dashed;} -.b5 {border-right-style: solid;} -.b6 {border-right-style: double;} -.b7 {border-right-style: groove;} -.b8 {border-right-style: ridge;} -.b9 {border-right-style: inset;} -.b10 {border-right-style: outset;} +.b1 { + border-right-style: none; +} +.b2 { + border-right-style: hidden; +} +.b3 { + border-right-style: dotted; +} +.b4 { + border-right-style: dashed; +} +.b5 { + border-right-style: solid; +} +.b6 { + border-right-style: double; +} +.b7 { + border-right-style: groove; +} +.b8 { + border-right-style: ridge; +} +.b9 { + border-right-style: inset; +} +.b10 { + border-right-style: outset; +} ``` ### Résultat diff --git a/files/fr/web/css/border-right-width/index.md b/files/fr/web/css/border-right-width/index.md index 36ae5b7d5d5a6e..0d28591e3568a2 100644 --- a/files/fr/web/css/border-right-width/index.md +++ b/files/fr/web/css/border-right-width/index.md @@ -55,13 +55,13 @@ border-right-width: unset; ### CSS ```css -.element1{ +.element1 { border-right: thick solid red; } -.element2{ +.element2 { border-right: medium solid orange; } -.element3{ +.element3 { border-right: thin solid green; } ``` @@ -69,17 +69,11 @@ border-right-width: unset; ### HTML ```html -

- Une bordure épaisse rouge. -

+

Une bordure épaisse rouge.

-

- Une bordure moyenne orange. -

+

Une bordure moyenne orange.

-

- Et une bordure fine verte. -

+

Et une bordure fine verte.

``` ### Résultat diff --git a/files/fr/web/css/border-right/index.md b/files/fr/web/css/border-right/index.md index b59bf951da1f24..073f77d17ccbd1 100644 --- a/files/fr/web/css/border-right/index.md +++ b/files/fr/web/css/border-right/index.md @@ -23,15 +23,15 @@ Ces propriétés permettent de décrire la bordure du côté droit d'un élémen > Comme pour les autres propriétés raccourcies, `border-right` définit toujours les valeurs de toutes les propriétés qu'elle peut définir, même si celles-ci ne sont pas indiquées. Pour les valeurs qui ne sont pas indiquées, on prendra les valeurs par défaut. Ainsi : > > ```css -> border-right-style: dotted; -> border-right: thick green; +> border-right-style: dotted; +> border-right: thick green; > ``` > > est équivalent à : > > ```css -> border-right-style: dotted; -> border-right: none thick green; +> border-right-style: dotted; +> border-right: none thick green; > ``` > > et la valeur {{cssxref("border-right-style")}} fournie avant `border-right` est ignorée. @@ -77,8 +77,7 @@ border-right: medium dashed green; ```html

- En passant elle prit sur un rayon un pot - de confiture portant cette étiquette, + En passant elle prit sur un rayon un pot de confiture portant cette étiquette, « MARMELADE D’ORANGES. »

``` diff --git a/files/fr/web/css/border-start-start-radius/index.md b/files/fr/web/css/border-start-start-radius/index.md index 53a7285c6c433b..c8af6b5fb53d87 100644 --- a/files/fr/web/css/border-start-start-radius/index.md +++ b/files/fr/web/css/border-start-start-radius/index.md @@ -43,16 +43,16 @@ Ainsi, avec un mode d'écriture `horizontal-tb`, cette propriété logique corre ```css div { -background-color: rebeccapurple; -width: 120px; -height: 120px; + background-color: rebeccapurple; + width: 120px; + height: 120px; border-start-start-radius: 10px; } .texteExemple { -writing-mode: vertical-rl; -padding: 10px; -background-color: #fff; + writing-mode: vertical-rl; + padding: 10px; + background-color: #fff; border-start-start-radius: 10px; } ``` @@ -61,7 +61,7 @@ background-color: #fff; ```html
-

Exemple

+

Exemple

``` diff --git a/files/fr/web/css/border-style/index.md b/files/fr/web/css/border-style/index.md index 0e736b725e6f21..f14e2ed357069f 100644 --- a/files/fr/web/css/border-style/index.md +++ b/files/fr/web/css/border-style/index.md @@ -68,9 +68,9 @@ Chacune des valeurs peut être un des mots-clés parmi la liste suivante. - : Un mot-clé qui décrit le style utilisé pour la bordure sur les côtés de la boîte. Ce mot-clé peut prendre l'une des valeurs suivantes : - `none` - - : L'effet obtenu est le même qu'avec `hidden` : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie (avec [`background-image`](/fr/docs/Web/CSS/background-image)), la valeur calculée de [`border-width`](/fr/docs/Web/CSS/border-width) sera `0`, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, `none` a la priorité la plus *basse* ; donc, si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée. + - : L'effet obtenu est le même qu'avec `hidden` : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie (avec [`background-image`](/fr/docs/Web/CSS/background-image)), la valeur calculée de [`border-width`](/fr/docs/Web/CSS/border-width) sera `0`, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, `none` a la priorité la plus _basse_ ; donc, si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée. - `hidden` - - : L'effet obtenu est le même qu'avec `none` : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie (avec [`background-image`](/fr/docs/Web/CSS/background-image)), la valeur calculée de [`border-width`](/fr/docs/Web/CSS/border-width) sera `0`, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, `hidden` a *la plus haute priorité* et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée. + - : L'effet obtenu est le même qu'avec `none` : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie (avec [`background-image`](/fr/docs/Web/CSS/background-image)), la valeur calculée de [`border-width`](/fr/docs/Web/CSS/border-width) sera `0`, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, `hidden` a _la plus haute priorité_ et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée. - `dotted` - : Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de [`border-width`](/fr/docs/Web/CSS/border-width). - `dashed` diff --git a/files/fr/web/css/border-top-color/index.md b/files/fr/web/css/border-top-color/index.md index 3c00869560d478..b33fe107c661cb 100644 --- a/files/fr/web/css/border-top-color/index.md +++ b/files/fr/web/css/border-top-color/index.md @@ -62,9 +62,10 @@ border-top-color: unset; ```html
-

Une boîte avec une bordure autour. - Notez le côté de la boîte qui est - rouge.

+

+ Une boîte avec une bordure autour. Notez le côté de la boîte qui est + rouge. +

``` diff --git a/files/fr/web/css/border-top-left-radius/index.md b/files/fr/web/css/border-top-left-radius/index.md index 908310749d4ffc..6680ae74945569 100644 --- a/files/fr/web/css/border-top-left-radius/index.md +++ b/files/fr/web/css/border-top-left-radius/index.md @@ -84,10 +84,10 @@ div { ### HTML ```html -
-
-
-
+
+
+
+
``` ### Résultat diff --git a/files/fr/web/css/border-top-right-radius/index.md b/files/fr/web/css/border-top-right-radius/index.md index c85ad3fefdc1e1..29d0c245e3ac3f 100644 --- a/files/fr/web/css/border-top-right-radius/index.md +++ b/files/fr/web/css/border-top-right-radius/index.md @@ -86,10 +86,10 @@ div { ### HTML ```html -
-
-
-
+
+
+
+
``` ### Résultat diff --git a/files/fr/web/css/border-top-style/index.md b/files/fr/web/css/border-top-style/index.md index 2ac88ee67add90..145209377ccfc9 100644 --- a/files/fr/web/css/border-top-style/index.md +++ b/files/fr/web/css/border-top-style/index.md @@ -75,23 +75,44 @@ La propriété `border-top-style` se définit avec l'un des mots-clés utilisés /* On applique un style sur le tableau */ table { border-width: 2px; - background-color: #52E385; + background-color: #52e385; } -tr, td { +tr, +td { padding: 3px; } /* Des exemples pour border-top-style */ -.b1 {border-top-style: none;} -.b2 {border-top-style: hidden;} -.b3 {border-top-style: dotted;} -.b4 {border-top-style: dashed;} -.b5 {border-top-style: solid;} -.b6 {border-top-style: double;} -.b7 {border-top-style: groove;} -.b8 {border-top-style: ridge;} -.b9 {border-top-style: inset;} -.b10 {border-top-style: outset;} +.b1 { + border-top-style: none; +} +.b2 { + border-top-style: hidden; +} +.b3 { + border-top-style: dotted; +} +.b4 { + border-top-style: dashed; +} +.b5 { + border-top-style: solid; +} +.b6 { + border-top-style: double; +} +.b7 { + border-top-style: groove; +} +.b8 { + border-top-style: ridge; +} +.b9 { + border-top-style: inset; +} +.b10 { + border-top-style: outset; +} ``` ### Résultat diff --git a/files/fr/web/css/border-top-width/index.md b/files/fr/web/css/border-top-width/index.md index f418a6c297589b..af81ef8b386c3c 100644 --- a/files/fr/web/css/border-top-width/index.md +++ b/files/fr/web/css/border-top-width/index.md @@ -55,13 +55,13 @@ border-top-width: unset; ### CSS ```css -.element1{ +.element1 { border-top: thick solid red; } -.element2{ +.element2 { border-top: medium solid orange; } -.element3{ +.element3 { border-top: thin solid green; } ``` @@ -69,17 +69,11 @@ border-top-width: unset; ### HTML ```html -

- Une bordure épaisse rouge. -

+

Une bordure épaisse rouge.

-

- Une bordure moyenne orange. -

+

Une bordure moyenne orange.

-

- Et une bordure fine verte. -

+

Et une bordure fine verte.

``` ### Résultat diff --git a/files/fr/web/css/border-top/index.md b/files/fr/web/css/border-top/index.md index 75ad4e5938f2fd..7e7deca00af967 100644 --- a/files/fr/web/css/border-top/index.md +++ b/files/fr/web/css/border-top/index.md @@ -77,8 +77,7 @@ Les valeurs de la propriété raccourcie peuvent être fournies dans n'importe q ```html

- En passant elle prit sur un rayon un pot - de confiture portant cette étiquette, + En passant elle prit sur un rayon un pot de confiture portant cette étiquette, « MARMELADE D’ORANGES. »

``` diff --git a/files/fr/web/css/border-width/index.md b/files/fr/web/css/border-width/index.md index 7e83293acfb435..abc872799be89f 100644 --- a/files/fr/web/css/border-width/index.md +++ b/files/fr/web/css/border-width/index.md @@ -80,26 +80,21 @@ La propriété `border-width` peut être définie avec une, deux, trois ou quatr ### HTML ```html -

- Une valeur : la bordure fait 6px sur les 4 côtés. -

+

Une valeur : la bordure fait 6px sur les 4 côtés.

- Deux valeurs différentes : elle fait 2px en haut - et en bas et elle mesure 10px pour les bords droit - et gauche. + Deux valeurs différentes : elle fait 2px en haut et en bas et elle mesure 10px + pour les bords droit et gauche.

- Trois valeurs différentes : 0.3em pour le haut, - 9px pour le bas et zéro pour la droite et la - gauche. + Trois valeurs différentes : 0.3em pour le haut, 9px pour le bas et zéro pour + la droite et la gauche.

- Quatre valeurs différentes : "thin" pour le haut, - "medium" pour la droite, "thick" pour le bas - et 1em pour la gauche. + Quatre valeurs différentes : "thin" pour le haut, "medium" pour la droite, + "thick" pour le bas et 1em pour la gauche.

``` diff --git a/files/fr/web/css/border/index.md b/files/fr/web/css/border/index.md index 6ce74bbe01c584..dbaa45332970fd 100644 --- a/files/fr/web/css/border/index.md +++ b/files/fr/web/css/border/index.md @@ -73,7 +73,7 @@ La propriété `border` peut être définie grâce à une ou plusieurs valeurs [ } style { border: 1px dashed black; - display:block; + display: block; } ``` @@ -81,10 +81,7 @@ style { ```html
Oh des bordures
-

- N'hésitez pas à éditer le CSS qui suit pour voir - l'effet des valeurs. -

+

N'hésitez pas à éditer le CSS qui suit pour voir l'effet des valeurs.