From 005cc1fd55aadcdcbd9aabbed7d648a275f8f23a Mon Sep 17 00:00:00 2001 From: James <36278229+FormularSumo@users.noreply.github.com> Date: Mon, 15 Jan 2024 21:58:53 +0000 Subject: [PATCH] Update remaining web area to use latest rgb() and hsl() syntax (#31497) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update rgb/hsl syntax in web\accessibility * Update rgb & hsl to use new syntax Including percentage instead of number for alpha value * Replace instances of rgba() with rgb() in web\api Includes rewording of canvas_api\tutorial\applying)styles to use rgb instead of rgba and include a percentage value for alpha. Rename referenced canvas_rgba.png → canvas_rgb.png. There weren't any instances of hsla() * Update rgb/hsl syntax in web\guide * Update rgb/hsl syntax in web\html Remove reference to rgba in element\input\color * Update rgb/hsl syntax in web\mathml I've left mathcolor as it lists all the possible ways of using color, including rgb and rgba, new and old syntax. * Update rgb/hsl syntax in web\mediia * Update rgb/hsl syntax in web\progressive_web_apps * Update rgb/hsl syntax in web\svg * Update miscellaneous rgb/hsl syntax in web Including fixing a typo in css\color * Apply linter/prettier suggestions * Fix some incorrect syntax found in review * Update files/en-us/web/html/element/input/color/index.md Co-authored-by: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com> * Update files/en-us/web/api/mutationrecord/oldvalue/index.md Co-authored-by: Estelle Weyl * Add 'with alpha transparency' to rgb() example This is because this section is about using rgb() to specify alpha transparency instead of the globalAlpha property, so the focus should be on changing the transparency * Update files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md Co-authored-by: Dipika Bhattacharya * Update files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md Co-authored-by: Dipika Bhattacharya * Update files/en-us/web/api/canvas_api/tutorial/basic_animations/index.md Co-authored-by: Dipika Bhattacharya * Fix incorrect rgb syntax in html area * Rename rgba to rgbColor * Move related code onto the same line * Move related code onto the same line * Update files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md Co-authored-by: Dipika Bhattacharya * Add back comma in using_css_gradients * Update comments in color * Add back decimal in color, and add to rgb/hsl I removed initially because it looked out of place, but actually it was probably to demonstrate having a decimal value (since it wasn't always supported in rgb). I've added it to rgb as well as rgba, and added an equivalent to hsl (in addition to hsla) to make it obvious that both versions work with decimals. * color syntax - make alpha values consistent I don't think there was any reason to have different alpha values for these two rgba examples. The different syntaxes are to show how they're used, so changing the alpha value for just rgba seemed to imply that it somehow uses alpha differently from rgb. This also brings it in line with the hsl/a examples which are consistent (also with 60% opacity) * Remove legacy rgba/hsla syntax from mathml\mathcolor I decided to make the decimal example .6 / .2 rather than .0 as I think that's better at showing using them, and is also consistent with https://developer.mozilla.org/en-US/docs/Web/CSS/color * Commit prettier suggestions As strange as it appears to be --------- Co-authored-by: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com> Co-authored-by: Estelle Weyl Co-authored-by: Dipika Bhattacharya --- .../accessibility/seizure_disorders/index.md | 2 +- .../index.md | 2 +- .../web/api/analysernode/fftsize/index.md | 4 +- .../analysernode/frequencybincount/index.md | 4 +- .../getbytefrequencydata/index.md | 4 +- .../getbytetimedomaindata/index.md | 4 +- .../getfloatfrequencydata/index.md | 5 +- .../getfloattimedomaindata/index.md | 4 +- files/en-us/web/api/analysernode/index.md | 4 +- .../web/api/analysernode/maxdecibels/index.md | 4 +- .../web/api/analysernode/mindecibels/index.md | 4 +- .../smoothingtimeconstant/index.md | 4 +- .../baseaudiocontext/createanalyser/index.md | 4 +- .../tutorial/advanced_animations/index.md | 6 +- .../{canvas_rgba.png => canvas_rgb.png} | Bin .../applying_styles_and_colors/index.md | 48 +++++------ .../tutorial/basic_animations/index.md | 10 +-- .../canvas_api/tutorial/basic_usage/index.md | 4 +- .../pixel_manipulation_with_canvas/index.md | 10 +-- .../tutorial/transformations/index.md | 6 +- .../clearrect/index.md | 2 +- .../fillstyle/index.md | 4 +- .../globalcompositeoperation/index.md | 18 ++--- .../putimagedata/index.md | 5 +- .../shadowcolor/index.md | 6 +- .../strokestyle/index.md | 4 +- .../web/api/css_painting_api/guide/index.md | 24 +++--- files/en-us/web/api/css_painting_api/index.md | 6 +- .../web/api/css_typed_om_api/guide/index.md | 10 +-- .../overridecolors/index.md | 8 +- .../cssstyledeclaration/setproperty/index.md | 2 +- .../document_object_model/examples/index.md | 4 +- .../index.md | 2 +- .../web/api/element/auxclick_event/index.md | 2 +- .../en-us/web/api/element/clientleft/index.md | 2 +- .../en-us/web/api/element/clienttop/index.md | 2 +- .../element/transitioncancel_event/index.md | 4 +- .../api/element/transitionend_event/index.md | 4 +- .../api/element/transitionrun_event/index.md | 4 +- .../element/transitionstart_event/index.md | 4 +- .../web/api/htmlfontelement/color/index.md | 2 +- .../web/api/htmlimageelement/alt/index.md | 4 +- .../api/htmlimageelement/crossorigin/index.md | 2 +- .../web/api/htmlimageelement/srcset/index.md | 2 +- .../en-us/web/api/htmlimageelement/x/index.md | 4 +- files/en-us/web/api/ink_api/index.md | 8 +- files/en-us/web/api/inkpresenter/index.md | 9 ++- .../updateinktrailstartpoint/index.md | 8 +- .../api/intersection_observer_api/index.md | 20 ++--- .../timing_element_visibility/index.md | 2 +- files/en-us/web/api/location/index.md | 2 +- .../taking_still_photos/index.md | 8 +- .../index.md | 8 +- .../web/api/mutationrecord/oldvalue/index.md | 2 +- .../en-us/web/api/performance_api/diagram.svg | 2 +- .../en-us/web/api/popover_api/using/index.md | 10 +-- .../using_service_workers/sw-fetch.svg | 30 +++---- .../using_service_workers/sw-lifecycle.svg | 58 +++++++------- .../svggeometryelement/ispointinfill/index.md | 2 +- .../ispointinstroke/index.md | 2 +- files/en-us/web/api/svgrectelement/index.md | 4 +- .../index.md | 8 +- .../tutorial/using_textures_in_webgl/index.md | 2 +- .../en-us/web/api/window/screenleft/index.md | 4 +- files/en-us/web/api/window/screentop/index.md | 4 +- files/en-us/web/api/window/screenx/index.md | 4 +- files/en-us/web/api/window/screeny/index.md | 4 +- files/en-us/web/css/color/index.md | 12 +-- .../css/css_colors/applying_color/index.md | 34 ++++---- .../css_images/using_css_gradients/index.md | 75 ++++++++---------- .../web/css/gradient/conic-gradient/index.md | 18 ++--- .../repeating-conic-gradient/index.md | 4 +- files/en-us/web/css/image/paint/index.md | 6 +- files/en-us/web/css/mix-blend-mode/index.md | 12 +-- .../css/block_formatting_context/index.md | 4 +- files/en-us/web/html/element/dialog/index.md | 10 +-- .../web/html/element/input/button/index.md | 4 +- .../web/html/element/input/color/index.md | 2 +- files/en-us/web/html/element/table/index.md | 8 +- files/en-us/web/html/element/tr/index.md | 12 +-- .../global_attributes/mathbackground/index.md | 6 +- .../global_attributes/mathcolor/index.md | 10 +-- .../audio_concepts/human-hearing-range.svg | 4 +- .../web/media/formats/video_codecs/index.md | 2 +- .../push-messaging-1.svg | 2 +- .../push-messaging-2.svg | 2 +- .../pwa-environment.svg | 2 +- files/en-us/web/svg/attribute/d/index.md | 9 ++- .../svg/attribute/stroke-dashoffset/index.md | 2 +- files/en-us/web/svg/content_type/index.md | 6 +- 90 files changed, 351 insertions(+), 360 deletions(-) rename files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/{canvas_rgba.png => canvas_rgb.png} (100%) diff --git a/files/en-us/web/accessibility/seizure_disorders/index.md b/files/en-us/web/accessibility/seizure_disorders/index.md index 82046427d5217d3..4d376fa4b67f15f 100644 --- a/files/en-us/web/accessibility/seizure_disorders/index.md +++ b/files/en-us/web/accessibility/seizure_disorders/index.md @@ -396,7 +396,7 @@ function set_background() { // get the second item of the list of p elements myP = myBodyElements[1]; - myP.style.background = "rgb(255,0,0)"; + myP.style.background = "rgb(255 0 0)"; } ``` diff --git a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.md b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.md index a18dba4e90c5c5e..5a61c947bb6aced 100644 --- a/files/en-us/web/accessibility/understanding_colors_and_luminance/index.md +++ b/files/en-us/web/accessibility/understanding_colors_and_luminance/index.md @@ -78,7 +78,7 @@ color: #ff00ffff; /* #rrggbbaa */ /* by HSL representation of the sRGB value */ color: hsl(300 100% 50%); -color: hsl(300deg 100% 50% / 1); +color: hsl(300deg 100% 50% / 100%); /* by HWB representation of the sRGB value */ color: hwb(300deg 0% 0%); diff --git a/files/en-us/web/api/analysernode/fftsize/index.md b/files/en-us/web/api/analysernode/fftsize/index.md index 8355d589a767c04..e0e98d593959501 100644 --- a/files/en-us/web/api/analysernode/fftsize/index.md +++ b/files/en-us/web/api/analysernode/fftsize/index.md @@ -44,11 +44,11 @@ function draw() { analyser.getByteTimeDomainData(dataArray); - canvasCtx.fillStyle = "rgb(200, 200, 200)"; + canvasCtx.fillStyle = "rgb(200 200 200)"; canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); canvasCtx.lineWidth = 2; - canvasCtx.strokeStyle = "rgb(0, 0, 0)"; + canvasCtx.strokeStyle = "rgb(0 0 0)"; canvasCtx.beginPath(); diff --git a/files/en-us/web/api/analysernode/frequencybincount/index.md b/files/en-us/web/api/analysernode/frequencybincount/index.md index c79907282013a4e..487e4a38d11048d 100644 --- a/files/en-us/web/api/analysernode/frequencybincount/index.md +++ b/files/en-us/web/api/analysernode/frequencybincount/index.md @@ -41,7 +41,7 @@ function draw() { analyser.getByteFrequencyData(dataArray); - canvasCtx.fillStyle = "rgb(0, 0, 0)"; + canvasCtx.fillStyle = "rgb(0 0 0)"; canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); const barWidth = (WIDTH / bufferLength) * 2.5 - 1; @@ -51,7 +51,7 @@ function draw() { for (let i = 0; i < bufferLength; i++) { barHeight = dataArray[i]; - canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`; + canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`; canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2); x += barWidth; diff --git a/files/en-us/web/api/analysernode/getbytefrequencydata/index.md b/files/en-us/web/api/analysernode/getbytefrequencydata/index.md index a032b5635c664f8..64cf1d0b092674e 100644 --- a/files/en-us/web/api/analysernode/getbytefrequencydata/index.md +++ b/files/en-us/web/api/analysernode/getbytefrequencydata/index.md @@ -54,7 +54,7 @@ function draw() { analyser.getByteFrequencyData(dataArray); - canvasCtx.fillStyle = "rgb(0, 0, 0)"; + canvasCtx.fillStyle = "rgb(0 0 0)"; canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); const barWidth = (WIDTH / bufferLength) * 2.5; @@ -64,7 +64,7 @@ function draw() { for (let i = 0; i < bufferLength; i++) { barHeight = dataArray[i]; - canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`; + canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`; canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2); x += barWidth + 1; diff --git a/files/en-us/web/api/analysernode/getbytetimedomaindata/index.md b/files/en-us/web/api/analysernode/getbytetimedomaindata/index.md index e6995c74c7ea5fd..1af3de5e00d1d1f 100644 --- a/files/en-us/web/api/analysernode/getbytetimedomaindata/index.md +++ b/files/en-us/web/api/analysernode/getbytetimedomaindata/index.md @@ -49,11 +49,11 @@ function draw() { drawVisual = requestAnimationFrame(draw); analyser.getByteTimeDomainData(dataArray); - canvasCtx.fillStyle = "rgb(200, 200, 200)"; + canvasCtx.fillStyle = "rgb(200 200 200)"; canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); canvasCtx.lineWidth = 2; - canvasCtx.strokeStyle = "rgb(0, 0, 0)"; + canvasCtx.strokeStyle = "rgb(0 0 0)"; const sliceWidth = (WIDTH * 1.0) / bufferLength; let x = 0; diff --git a/files/en-us/web/api/analysernode/getfloatfrequencydata/index.md b/files/en-us/web/api/analysernode/getfloatfrequencydata/index.md index e0249b825d74aef..0338a2d1b3c544e 100644 --- a/files/en-us/web/api/analysernode/getfloatfrequencydata/index.md +++ b/files/en-us/web/api/analysernode/getfloatfrequencydata/index.md @@ -90,7 +90,7 @@ For more complete applied examples/information, check out our [Voice-change-O-ma analyserNode.getFloatFrequencyData(dataArray); //Draw black background - canvasCtx.fillStyle = "rgb(0, 0, 0)"; + canvasCtx.fillStyle = "rgb(0 0 0)"; canvasCtx.fillRect(0, 0, canvas.width, canvas.height); //Draw spectrum @@ -98,8 +98,7 @@ For more complete applied examples/information, check out our [Voice-change-O-ma let posX = 0; for (let i = 0; i < bufferLength; i++) { const barHeight = (dataArray[i] + 140) * 2; - canvasCtx.fillStyle = - "rgb(" + Math.floor(barHeight + 100) + ", 50, 50)"; + canvasCtx.fillStyle = "rgb(" + Math.floor(barHeight + 100) + " 50 50)"; canvasCtx.fillRect( posX, canvas.height - barHeight / 2, diff --git a/files/en-us/web/api/analysernode/getfloattimedomaindata/index.md b/files/en-us/web/api/analysernode/getfloattimedomaindata/index.md index c021f782d8389af..a8e72219eaea105 100644 --- a/files/en-us/web/api/analysernode/getfloattimedomaindata/index.md +++ b/files/en-us/web/api/analysernode/getfloattimedomaindata/index.md @@ -48,10 +48,10 @@ function draw() { drawVisual = requestAnimationFrame(draw); analyser.getFloatTimeDomainData(dataArray); - canvasCtx.fillStyle = "rgb(200, 200, 200)"; + canvasCtx.fillStyle = "rgb(200 200 200)"; canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); canvasCtx.lineWidth = 2; - canvasCtx.strokeStyle = "rgb(0, 0, 0)"; + canvasCtx.strokeStyle = "rgb(0 0 0)"; canvasCtx.beginPath(); const sliceWidth = (WIDTH * 1.0) / bufferLength; diff --git a/files/en-us/web/api/analysernode/index.md b/files/en-us/web/api/analysernode/index.md index ccb32d42a3bbd81..f3df069e1564009 100644 --- a/files/en-us/web/api/analysernode/index.md +++ b/files/en-us/web/api/analysernode/index.md @@ -108,11 +108,11 @@ function draw() { analyser.getByteTimeDomainData(dataArray); - canvasCtx.fillStyle = "rgb(200, 200, 200)"; + canvasCtx.fillStyle = "rgb(200 200 200)"; canvasCtx.fillRect(0, 0, canvas.width, canvas.height); canvasCtx.lineWidth = 2; - canvasCtx.strokeStyle = "rgb(0, 0, 0)"; + canvasCtx.strokeStyle = "rgb(0 0 0)"; canvasCtx.beginPath(); diff --git a/files/en-us/web/api/analysernode/maxdecibels/index.md b/files/en-us/web/api/analysernode/maxdecibels/index.md index c235753881bc3ec..d35bbee89dc65a6 100644 --- a/files/en-us/web/api/analysernode/maxdecibels/index.md +++ b/files/en-us/web/api/analysernode/maxdecibels/index.md @@ -46,7 +46,7 @@ function draw() { analyser.getByteFrequencyData(dataArray); - canvasCtx.fillStyle = "rgb(0, 0, 0)"; + canvasCtx.fillStyle = "rgb(0 0 0)"; canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); const barWidth = (WIDTH / bufferLength) * 2.5; @@ -56,7 +56,7 @@ function draw() { for (let i = 0; i < bufferLength; i++) { barHeight = dataArray[i]; - canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`; + canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`; canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2); x += barWidth + 1; diff --git a/files/en-us/web/api/analysernode/mindecibels/index.md b/files/en-us/web/api/analysernode/mindecibels/index.md index 92f827a3dfebe6e..dcf2f793d0d8032 100644 --- a/files/en-us/web/api/analysernode/mindecibels/index.md +++ b/files/en-us/web/api/analysernode/mindecibels/index.md @@ -43,7 +43,7 @@ function draw() { analyser.getByteFrequencyData(dataArray); - canvasCtx.fillStyle = "rgb(0, 0, 0)"; + canvasCtx.fillStyle = "rgb(0 0 0)"; canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); const barWidth = (WIDTH / bufferLength) * 2.5; @@ -53,7 +53,7 @@ function draw() { for (let i = 0; i < bufferLength; i++) { barHeight = dataArray[i]; - canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`; + canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`; canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2); x += barWidth + 1; diff --git a/files/en-us/web/api/analysernode/smoothingtimeconstant/index.md b/files/en-us/web/api/analysernode/smoothingtimeconstant/index.md index babef8d5e0806b2..f9f4ab3483a03e5 100644 --- a/files/en-us/web/api/analysernode/smoothingtimeconstant/index.md +++ b/files/en-us/web/api/analysernode/smoothingtimeconstant/index.md @@ -48,7 +48,7 @@ function draw() { analyser.getByteFrequencyData(dataArray); - canvasCtx.fillStyle = "rgb(0, 0, 0)"; + canvasCtx.fillStyle = "rgb(0 0 0)"; canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); const barWidth = (WIDTH / bufferLength) * 2.5; @@ -58,7 +58,7 @@ function draw() { for (let i = 0; i < bufferLength; i++) { barHeight = dataArray[i]; - canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`; + canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`; canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2); x += barWidth + 1; diff --git a/files/en-us/web/api/baseaudiocontext/createanalyser/index.md b/files/en-us/web/api/baseaudiocontext/createanalyser/index.md index 66cf0ac2ed3f7d2..e8058575b579f64 100644 --- a/files/en-us/web/api/baseaudiocontext/createanalyser/index.md +++ b/files/en-us/web/api/baseaudiocontext/createanalyser/index.md @@ -59,11 +59,11 @@ function draw() { analyser.getByteTimeDomainData(dataArray); - canvasCtx.fillStyle = "rgb(200, 200, 200)"; + canvasCtx.fillStyle = "rgb(200 200 200)"; canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); canvasCtx.lineWidth = 2; - canvasCtx.strokeStyle = "rgb(0, 0, 0)"; + canvasCtx.strokeStyle = "rgb(0 0 0)"; canvasCtx.beginPath(); diff --git a/files/en-us/web/api/canvas_api/tutorial/advanced_animations/index.md b/files/en-us/web/api/canvas_api/tutorial/advanced_animations/index.md index b076c4f4fdde7a0..8bf52a9440d5c78 100644 --- a/files/en-us/web/api/canvas_api/tutorial/advanced_animations/index.md +++ b/files/en-us/web/api/canvas_api/tutorial/advanced_animations/index.md @@ -244,7 +244,7 @@ ball.draw(); Until now we have made use of the {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} method when clearing prior frames. If you replace this method with a semi-transparent {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, you can easily create a trailing effect. ```js -ctx.fillStyle = "rgba(255, 255, 255, 0.3)"; +ctx.fillStyle = "rgb(255 255 255 / 30%)"; ctx.fillRect(0, 0, canvas.width, canvas.height); ``` @@ -280,7 +280,7 @@ const ball = { }; function draw() { - ctx.fillStyle = "rgba(255, 255, 255, 0.3)"; + ctx.fillStyle = "rgb(255 255 255 / 30%)"; ctx.fillRect(0, 0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; @@ -350,7 +350,7 @@ const ball = { }; function clear() { - ctx.fillStyle = "rgba(255, 255, 255, 0.3)"; + ctx.fillStyle = "rgb(255 255 255 / 30%)"; ctx.fillRect(0, 0, canvas.width, canvas.height); } diff --git a/files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/canvas_rgba.png b/files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/canvas_rgb.png similarity index 100% rename from files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/canvas_rgba.png rename to files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/canvas_rgb.png diff --git a/files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md b/files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md index 2f058bddedc27c6..d68114212e7039d 100644 --- a/files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md +++ b/files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md @@ -30,8 +30,8 @@ The valid strings you can enter should, according to the specification, be CSS { ctx.fillStyle = "orange"; ctx.fillStyle = "#FFA500"; -ctx.fillStyle = "rgb(255, 165, 0)"; -ctx.fillStyle = "rgba(255, 165, 0, 1)"; +ctx.fillStyle = "rgb(255 165 0)"; +ctx.fillStyle = "rgb(255 165 0 / 100%)"; ``` ### A `fillStyle` example @@ -43,9 +43,9 @@ function draw() { const ctx = document.getElementById("canvas").getContext("2d"); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { - ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor( + ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)} ${Math.floor( 255 - 42.5 * j, - )}, 0)`; + )} 0)`; ctx.fillRect(j * 25, i * 25, 25, 25); } } @@ -75,7 +75,7 @@ function draw() { const ctx = document.getElementById("canvas").getContext("2d"); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { - ctx.strokeStyle = `rgb(0, ${Math.floor(255 - 42.5 * i)}, ${Math.floor( + ctx.strokeStyle = `rgb(0 ${Math.floor(255 - 42.5 * i)} ${Math.floor( 255 - 42.5 * j, )})`; ctx.beginPath(); @@ -107,16 +107,16 @@ In addition to drawing opaque shapes to the canvas, we can also draw semi-transp The `globalAlpha` property can be useful if you want to draw a lot of shapes on the canvas with similar transparency, but otherwise it's generally more useful to set the transparency on individual shapes when setting their colors. -Because the `strokeStyle` and `fillStyle` properties accept CSS rgba color values, we can use the following notation to assign a transparent color to them. +Because the `strokeStyle` and `fillStyle` properties accept CSS rgb color values, we can use the following notation to assign a transparent color to them. ```js // Assigning transparent colors to stroke and fill style -ctx.strokeStyle = "rgba(255, 0, 0, 0.5)"; -ctx.fillStyle = "rgba(255, 0, 0, 0.5)"; +ctx.strokeStyle = "rgb(255 0 0 / 50%)"; +ctx.fillStyle = "rgb(255 0 0 / 50%)"; ``` -The `rgba()` function is similar to the `rgb()` function but it has one extra parameter. The last parameter sets the transparency value of this particular color. The valid range is again between 0.0 (fully transparent) and 1.0 (fully opaque). +The `rgb()` function has an optional extra parameter. The last parameter sets the transparency value of this particular color. The valid range is specified as a percentage between `0%` (fully transparent) and `100%` (fully opaque) or as a number between `0.0` (equivalent to `0%`) and `1.0` (equivalent to `100%`). ### A `globalAlpha` example @@ -158,27 +158,27 @@ draw(); {{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}} -### An example using `rgba()` +### An example using `rgb()` with alpha transparency -In this second example, we do something similar to the one above, but instead of drawing circles on top of each other, I've drawn small rectangles with increasing opacity. Using `rgba()` gives you a little more control and flexibility because we can set the fill and stroke style individually. +In this second example, we do something similar to the one above, but instead of drawing circles on top of each other, I've drawn small rectangles with increasing opacity. Using `rgb()` gives you a little more control and flexibility because we can set the fill and stroke style individually. ```js function draw() { const ctx = document.getElementById("canvas").getContext("2d"); // Draw background - ctx.fillStyle = "rgb(255, 221, 0)"; + ctx.fillStyle = "rgb(255 221 0)"; ctx.fillRect(0, 0, 150, 37.5); - ctx.fillStyle = "rgb(102, 204, 0)"; + ctx.fillStyle = "rgb(102 204 0)"; ctx.fillRect(0, 37.5, 150, 37.5); - ctx.fillStyle = "rgb(0, 153, 255)"; + ctx.fillStyle = "rgb(0 153 255)"; ctx.fillRect(0, 75, 150, 37.5); - ctx.fillStyle = "rgb(255, 51, 0)"; + ctx.fillStyle = "rgb(255 51 0)"; ctx.fillRect(0, 112.5, 150, 37.5); // Draw semi transparent rectangles for (let i = 0; i < 10; i++) { - ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`; + ctx.fillStyle = `rgb(255 255 255 / ${(i + 1) / 10})`; for (let j = 0; j < 4; j++) { ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5); } @@ -194,7 +194,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("An_example_using_rgba", "180", "180", "canvas_rgba.png")}} +{{EmbedLiveSample("An_example_using_rgb_with_alpha_transparency", "180", "180", "canvas_rgb.png")}} ## Line styles @@ -521,7 +521,7 @@ function draw() { const lingrad2 = ctx.createLinearGradient(0, 50, 0, 95); lingrad2.addColorStop(0.5, "#000"); - lingrad2.addColorStop(1, "rgba(0, 0, 0, 0)"); + lingrad2.addColorStop(1, "rgb(0 0 0 / 0%)"); // assign gradients to fill and stroke styles ctx.fillStyle = lingrad; @@ -559,22 +559,22 @@ function draw() { const radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30); radgrad.addColorStop(0, "#A7D30C"); radgrad.addColorStop(0.9, "#019F62"); - radgrad.addColorStop(1, "rgba(1, 159, 98, 0)"); + radgrad.addColorStop(1, "rgb(1 159 98 / 0%)"); const radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50); radgrad2.addColorStop(0, "#FF5F98"); radgrad2.addColorStop(0.75, "#FF0188"); - radgrad2.addColorStop(1, "rgba(255, 1, 136, 0)"); + radgrad2.addColorStop(1, "rgb(255 1 136 / 0%)"); const radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40); radgrad3.addColorStop(0, "#00C9FF"); radgrad3.addColorStop(0.8, "#00B5E2"); - radgrad3.addColorStop(1, "rgba(0, 201, 255, 0)"); + radgrad3.addColorStop(1, "rgb(0 201 255 / 0%)"); const radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90); radgrad4.addColorStop(0, "#F4F201"); radgrad4.addColorStop(0.8, "#E4C700"); - radgrad4.addColorStop(1, "rgba(228, 199, 0, 0)"); + radgrad4.addColorStop(1, "rgb(228 199 0 / 0%)"); // draw shapes ctx.fillStyle = radgrad4; @@ -598,7 +598,7 @@ draw(); In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict. -The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient `#019F62 = rgba(1,159,98,1)`. +The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient `#019F62 = rgb(1 159 98 / 100%)`. {{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "canvas_radialgradient.png")}} @@ -740,7 +740,7 @@ function draw() { ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; - ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; + ctx.shadowColor = "rgb(0 0 0 / 50%)"; ctx.font = "20px Times New Roman"; ctx.fillStyle = "Black"; diff --git a/files/en-us/web/api/canvas_api/tutorial/basic_animations/index.md b/files/en-us/web/api/canvas_api/tutorial/basic_animations/index.md index d25ece17b7c11c3..c430d24112d4e87 100644 --- a/files/en-us/web/api/canvas_api/tutorial/basic_animations/index.md +++ b/files/en-us/web/api/canvas_api/tutorial/basic_animations/index.md @@ -73,8 +73,8 @@ function draw() { ctx.globalCompositeOperation = "destination-over"; ctx.clearRect(0, 0, 300, 300); // clear canvas - ctx.fillStyle = "rgba(0, 0, 0, 0.4)"; - ctx.strokeStyle = "rgba(0, 153, 255, 0.4)"; + ctx.fillStyle = "rgb(0 0 0 / 40%)"; + ctx.strokeStyle = "rgb(0 153 255 / 40%)"; ctx.save(); ctx.translate(150, 150); @@ -217,7 +217,7 @@ function clock() { ctx.beginPath(); ctx.arc(95, 0, 10, 0, Math.PI * 2, true); ctx.stroke(); - ctx.fillStyle = "rgba(0, 0, 0, 0)"; + ctx.fillStyle = "rgb(0 0 0 / 0%)"; ctx.arc(0, 0, 3, 0, Math.PI * 2, true); ctx.fill(); ctx.restore(); @@ -366,7 +366,7 @@ function draw() { body { margin: 0; padding: 0; - background-color: rgba(0, 0, 0, 0.05); + background-color: rgb(0 0 0 / 5%); } ``` @@ -460,7 +460,7 @@ function Particle(x, y, particleTrailWidth, strokeColor, rotateSpeed) { function anim() { requestAnimationFrame(anim); - context.fillStyle = "rgba(0,0,0,0.05)"; + context.fillStyle = "rgb(0 0 0 / 5%)"; context.fillRect(0, 0, canvas.width, canvas.height); particlesArray.forEach((particle) => particle.rotate()); diff --git a/files/en-us/web/api/canvas_api/tutorial/basic_usage/index.md b/files/en-us/web/api/canvas_api/tutorial/basic_usage/index.md index 2829a91cdf75273..5a17e87c0aad5c7 100644 --- a/files/en-us/web/api/canvas_api/tutorial/basic_usage/index.md +++ b/files/en-us/web/api/canvas_api/tutorial/basic_usage/index.md @@ -134,10 +134,10 @@ To begin, let's take a look at a simple example that draws two intersecting rect if (canvas.getContext) { const ctx = canvas.getContext("2d"); - ctx.fillStyle = "rgb(200, 0, 0)"; + ctx.fillStyle = "rgb(200 0 0)"; ctx.fillRect(10, 10, 50, 50); - ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; + ctx.fillStyle = "rgb(0 0 200 / 50%)"; ctx.fillRect(30, 30, 50, 50); } } diff --git a/files/en-us/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md b/files/en-us/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md index cd592e7710427d0..b1454b93fdb0cdf 100644 --- a/files/en-us/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md +++ b/files/en-us/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md @@ -60,7 +60,7 @@ To create a new, blank `ImageData` object, you should use the {{domxref("CanvasR const myImageData = ctx.createImageData(width, height); ``` -This creates a new `ImageData` object with the specified dimensions. All pixels are preset to transparent black (all zeroes, i.e., rgba(0,0,0,0)). +This creates a new `ImageData` object with the specified dimensions. All pixels are preset to transparent black (all zeroes, i.e., rgb(0 0 0 / 0%)). You can also create a new `ImageData` object with the same dimensions as the object specified by `anotherImageData`. The new object's pixels are all preset to transparent black. **This does not copy the image data!** @@ -106,11 +106,11 @@ function pick(event, destination) { const pixel = ctx.getImageData(x, y, 1, 1); const data = pixel.data; - const rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`; - destination.style.background = rgba; - destination.textContent = rgba; + const rgbColor = `rgb(${data[0]} ${data[1]} ${data[2]} / ${data[3] / 255})`; + destination.style.background = rgbColor; + destination.textContent = rgbColor; - return rgba; + return rgbColor; } canvas.addEventListener("mousemove", (event) => pick(event, hoveredColor)); diff --git a/files/en-us/web/api/canvas_api/tutorial/transformations/index.md b/files/en-us/web/api/canvas_api/tutorial/transformations/index.md index 9487bac03328277..6be31d97fc7a446 100644 --- a/files/en-us/web/api/canvas_api/tutorial/transformations/index.md +++ b/files/en-us/web/api/canvas_api/tutorial/transformations/index.md @@ -107,7 +107,7 @@ function draw() { for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { ctx.save(); - ctx.fillStyle = `rgb(${51 * i}, ${255 - 51 * i}, 255)`; + ctx.fillStyle = `rgb(${51 * i} ${255 - 51 * i} 255)`; ctx.translate(10 + j * 50, 10 + i * 50); ctx.fillRect(0, 0, 25, 25); ctx.restore(); @@ -272,13 +272,13 @@ function draw() { let c = 0; for (let i = 0; i <= 12; i++) { c = Math.floor((255 / 12) * i); - ctx.fillStyle = `rgb(${c}, ${c}, ${c})`; + ctx.fillStyle = `rgb(${c} ${c} ${c})`; ctx.fillRect(0, 0, 100, 10); ctx.transform(cos, sin, -sin, cos, 0, 0); } ctx.setTransform(-1, 0, 0, 1, 100, 100); - ctx.fillStyle = "rgba(255, 128, 255, 0.5)"; + ctx.fillStyle = "rgb(255 128 255 / 50%)"; ctx.fillRect(0, 50, 100, 100); } ``` diff --git a/files/en-us/web/api/canvasrenderingcontext2d/clearrect/index.md b/files/en-us/web/api/canvasrenderingcontext2d/clearrect/index.md index 144b82af3d65430..6bb08566013c192 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/clearrect/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/clearrect/index.md @@ -25,7 +25,7 @@ clearRect(x, y, width, height) ``` The `clearRect()` method sets the pixels in a rectangular area to -transparent black (`rgba(0,0,0,0)`). The rectangle's top-left corner is at +transparent black (`rgb(0 0 0 / 0%)`). The rectangle's top-left corner is at `(x, y)`, and its size is specified by `width` and `height`. diff --git a/files/en-us/web/api/canvasrenderingcontext2d/fillstyle/index.md b/files/en-us/web/api/canvasrenderingcontext2d/fillstyle/index.md index e99eca596910f89..2b34d81c329e800 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/fillstyle/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/fillstyle/index.md @@ -69,8 +69,8 @@ const ctx = canvas.getContext("2d"); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.fillStyle = `rgb( - ${Math.floor(255 - 42.5 * i)}, - ${Math.floor(255 - 42.5 * j)}, + ${Math.floor(255 - 42.5 * i)} + ${Math.floor(255 - 42.5 * j)} 0)`; ctx.fillRect(j * 25, i * 25, 25, 25); } diff --git a/files/en-us/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md b/files/en-us/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md index dcb84bc4bf091ca..21e3bda35c006d4 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md @@ -234,7 +234,7 @@ function runComposite() { ctx.globalCompositeOperation = pop; ctx.drawImage(canvas2, 0, 0, width / 2, height / 2); ctx.globalCompositeOperation = "source-over"; - ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillStyle = "rgb(0 0 0 / 80%)"; ctx.fillRect(0, height / 2 - 20, width / 2, 20); ctx.fillStyle = "#FFF"; ctx.font = "14px arial"; @@ -245,7 +245,7 @@ function runComposite() { ctx.clearRect(0, 0, width, height); ctx.save(); ctx.drawImage(canvas1, 0, 0, width / 2, height / 2); - ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillStyle = "rgb(0 0 0 / 80%)"; ctx.fillRect(0, height / 2 - 20, width / 2, 20); ctx.fillStyle = "#FFF"; ctx.font = "14px arial"; @@ -256,7 +256,7 @@ function runComposite() { ctx.clearRect(0, 0, width, height); ctx.save(); ctx.drawImage(canvas2, 0, 0, width / 2, height / 2); - ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillStyle = "rgb(0 0 0 / 80%)"; ctx.fillRect(0, height / 2 - 20, width / 2, 20); ctx.fillStyle = "#FFF"; ctx.font = "14px arial"; @@ -282,15 +282,15 @@ const lightMix = () => { ctx.save(); ctx.globalCompositeOperation = "lighter"; ctx.beginPath(); - ctx.fillStyle = "rgba(255,0,0,1)"; + ctx.fillStyle = "rgb(255 0 0 / 100%)"; ctx.arc(100, 200, 100, Math.PI * 2, 0, false); ctx.fill(); ctx.beginPath(); - ctx.fillStyle = "rgba(0,0,255,1)"; + ctx.fillStyle = "rgb(0 0 255 / 100%)"; ctx.arc(220, 200, 100, Math.PI * 2, 0, false); ctx.fill(); ctx.beginPath(); - ctx.fillStyle = "rgba(0,255,0,1)"; + ctx.fillStyle = "rgb(0 255 0 / 100%)"; ctx.arc(160, 100, 100, Math.PI * 2, 0, false); ctx.fill(); ctx.restore(); @@ -318,9 +318,9 @@ const colorSphere = (element) => { otop + halfWidth, ); const color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 }); - gradient.addColorStop(0, "rgba(0,0,0,0)"); - gradient.addColorStop(0.7, `rgba(${color.R}, ${color.G}, ${color.B}, 1)`); - gradient.addColorStop(1, "rgba(255,255,255,1)"); + gradient.addColorStop(0, "rgb(0 0 0 / 0%)"); + gradient.addColorStop(0.7, `rgb(${color.R} ${color.G} ${color.B} / 100%)`); + gradient.addColorStop(1, "rgb(255 255 255 / 100%)"); ctx.beginPath(); ctx.moveTo(oleft + halfWidth, otop); ctx.lineTo(oleft + halfWidth, otop + halfWidth); diff --git a/files/en-us/web/api/canvasrenderingcontext2d/putimagedata/index.md b/files/en-us/web/api/canvasrenderingcontext2d/putimagedata/index.md index 9c55fec3ef0e3c2..b3c350acd76169f 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/putimagedata/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/putimagedata/index.md @@ -99,9 +99,8 @@ function putImageData( for (let y = dirtyY; y < limitBottom; y++) { for (let x = dirtyX; x < limitRight; x++) { const pos = y * width + x; - ctx.fillStyle = `rgba(${data[pos * 4 + 0]}, ${data[pos * 4 + 1]}, ${ - data[pos * 4 + 2] - }, ${data[pos * 4 + 3] / 255})`; + ctx.fillStyle = `rgb(${data[pos * 4 + 0]} ${data[pos * 4 + 1]} + ${data[pos * 4 + 2]} / ${data[pos * 4 + 3] / 255})`; ctx.fillRect(x + dx, y + dy, 1, 1); } } diff --git a/files/en-us/web/api/canvasrenderingcontext2d/shadowcolor/index.md b/files/en-us/web/api/canvasrenderingcontext2d/shadowcolor/index.md index 1a0a0cc6581ef6c..1dbbd8741ce2bde 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/shadowcolor/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/shadowcolor/index.md @@ -89,18 +89,18 @@ const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); // Shadow -ctx.shadowColor = "rgba(255, 0, 0, .8)"; +ctx.shadowColor = "rgb(255 0 0 / 80%)"; ctx.shadowBlur = 8; ctx.shadowOffsetX = 30; ctx.shadowOffsetY = 20; // Filled rectangle -ctx.fillStyle = "rgba(0, 255, 0, .2)"; +ctx.fillStyle = "rgb(0 255 0 / 20%)"; ctx.fillRect(10, 10, 150, 100); // Stroked rectangle ctx.lineWidth = 10; -ctx.strokeStyle = "rgba(0, 0, 255, .6)"; +ctx.strokeStyle = "rgb(0 0 255 / 60%)"; ctx.strokeRect(10, 10, 150, 100); ``` diff --git a/files/en-us/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/en-us/web/api/canvasrenderingcontext2d/strokestyle/index.md index c2d64f40a30bb40..8c3d3f2098111c4 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/strokestyle/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/strokestyle/index.md @@ -70,8 +70,8 @@ const ctx = document.getElementById("canvas").getContext("2d"); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.strokeStyle = `rgb( - 0, - ${Math.floor(255 - 42.5 * i)}, + 0 + ${Math.floor(255 - 42.5 * i)} ${Math.floor(255 - 42.5 * j)})`; ctx.beginPath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true); diff --git a/files/en-us/web/api/css_painting_api/guide/index.md b/files/en-us/web/api/css_painting_api/guide/index.md index e262d1e403fef24..fc6faa4a918ae76 100644 --- a/files/en-us/web/api/css_painting_api/guide/index.md +++ b/files/en-us/web/api/css_painting_api/guide/index.md @@ -41,7 +41,7 @@ registerPaint( a subset of the HTML Canvas API. */ paint(ctx) { - ctx.fillStyle = "hsl(55 90% 60% / 1.0)"; + ctx.fillStyle = "hsl(55 90% 60% / 100%)"; ctx.fillRect(0, 15, 200, 20); /* order: x, y, w, h */ } }, @@ -54,7 +54,7 @@ We have then used the `paint()` function to paint to our canvas. A `paint()` function can take three arguments. Here we have provided one argument: the rendering context (we'll look at more in due course), often referred to by the variable name `ctx`. The 2D Rendering Context is a subset of the [HTML Canvas API](/en-US/docs/Web/API/Canvas_API); the version available to Houdini (called the `PaintRenderingContext2D`) is a further subset containing most of the features available in the full Canvas API with the [exception](https://drafts.css-houdini.org/css-paint-api-1/#2d-rendering-context) of the `CanvasImageData`, `CanvasUserInterface`, `CanvasText`, and `CanvasTextDrawingStyles` APIs. -We define the [`fillStyle`](/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle) as being `hsl(55 90% 60% / 1.0)`, which is a shade of yellow, and then call `fillRect()` to create a rectangle of that color. The [`fillRect()`](/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect) parameters are, in order, x-axis origin, y-axis origin, width, and height. `fillRect(0, 15, 200, 20)` results in the creation of a rectangle that is 200 units wide by 20 units tall, positioned 0 units from the left and 15 units from the top of the content box. +We define the [`fillStyle`](/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle) as being `hsl(55 90% 60% / 100%)`, which is a shade of yellow, and then call `fillRect()` to create a rectangle of that color. The [`fillRect()`](/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect) parameters are, in order, x-axis origin, y-axis origin, width, and height. `fillRect(0, 15, 200, 20)` results in the creation of a rectangle that is 200 units wide by 20 units tall, positioned 0 units from the left and 15 units from the top of the content box. We can use the CSS [`background-size`](/en-US/docs/Web/CSS/background-size) and [`background-position`](/en-US/docs/Web/CSS/background-position) properties to re-size or relocate this background image, but this is the default size and placement of the yellow box we created in our paint worklet. @@ -129,7 +129,7 @@ registerPaint( size is the paintSize, the dimensions (height and width) of the box being painted */ paint(ctx, size) { - ctx.fillStyle = "hsl(55 90% 60% / 1.0)"; + ctx.fillStyle = "hsl(55 90% 60% / 100%)"; ctx.fillRect(0, size.height / 3, size.width * 0.4, size.height * 0.6); } }, @@ -288,16 +288,16 @@ In our CSS, we define the `--boxColor` and `--widthSubtractor` custom properties ```css li { background-image: paint(boxbg); - --boxColor: hsl(55 90% 60% / 1); + --boxColor: hsl(55 90% 60% / 100%); } li:nth-of-type(3n) { - --boxColor: hsl(155 90% 60% / 1); + --boxColor: hsl(155 90% 60% / 100%); --widthSubtractor: 20; } li:nth-of-type(3n + 1) { - --boxColor: hsl(255 90% 60% / 1); + --boxColor: hsl(255 90% 60% / 100%); --widthSubtractor: 40; } ``` @@ -393,13 +393,13 @@ We give each header a different value for the `--highColor` [custom property](/e background-image: paint(headerHighlight); } h1 { - --highColor: hsl(155 90% 60% / 0.7); + --highColor: hsl(155 90% 60% / 70%); } h3 { - --highColor: hsl(255 90% 60% / 0.5); + --highColor: hsl(255 90% 60% / 50%); } h6 { - --highColor: hsl(355 90% 60% / 0.3); + --highColor: hsl(355 90% 60% / 30%); } ``` @@ -582,17 +582,17 @@ We can set different colors, stroke widths, and pick whether the background imag ```css li { - --boxColor: hsl(155 90% 60% / 0.5); + --boxColor: hsl(155 90% 60% / 50%); background-image: paint(hollowHighlights, stroke, 5px); } li:nth-of-type(3n) { - --boxColor: hsl(255 90% 60% / 0.5); + --boxColor: hsl(255 90% 60% / 50%); background-image: paint(hollowHighlights, filled, 3px); } li:nth-of-type(3n + 1) { - --boxColor: hsl(355 90% 60% / 0.5); + --boxColor: hsl(355 90% 60% / 50%); background-image: paint(hollowHighlights, stroke, 1px); } ``` diff --git a/files/en-us/web/api/css_painting_api/index.md b/files/en-us/web/api/css_painting_api/index.md index 225715b230200b3..ce08b2a7a423968 100644 --- a/files/en-us/web/api/css_painting_api/index.md +++ b/files/en-us/web/api/css_painting_api/index.md @@ -117,16 +117,16 @@ In our CSS, we define the `--boxColor` and `--widthSubtractor` custom properties ```css li { background-image: paint(boxbg); - --boxColor: hsl(55 90% 60% / 1); + --boxColor: hsl(55 90% 60% / 100%); } li:nth-of-type(3n) { - --boxColor: hsl(155 90% 60% / 1); + --boxColor: hsl(155 90% 60% / 100%); --widthSubtractor: 20; } li:nth-of-type(3n + 1) { - --boxColor: hsl(255 90% 60% / 1); + --boxColor: hsl(255 90% 60% / 100%); --widthSubtractor: 40; } ``` diff --git a/files/en-us/web/api/css_typed_om_api/guide/index.md b/files/en-us/web/api/css_typed_om_api/guide/index.md index 6391514d754faba..d5f7a8505cef8ca 100644 --- a/files/en-us/web/api/css_typed_om_api/guide/index.md +++ b/files/en-us/web/api/css_typed_om_api/guide/index.md @@ -122,7 +122,7 @@ for (const value of ofInterest) { {{EmbedLiveSample(".get_method_custom_properties", 120, 300)}} -We included {{cssxref('border-left-color')}} to demonstrate that, had we included all the properties, every value that defaults to [`currentcolor`](/en-US/docs/Web/CSS/color_value) (including {{cssxref('caret-color')}}, {{cssxref('outline-color')}}, {{cssxref('text-decoration-color')}}, {{cssxref('column-rule-color')}}, etc.) would return `rgb(255, 0, 0)`. The link has inherited `font-weight: bold;` from the paragraph's styles, listing it as `font-weight: 700`. Custom properties, like our `--color: red`, are properties. As such, they are accessible via `get()`. +We included {{cssxref('border-left-color')}} to demonstrate that, had we included all the properties, every value that defaults to [`currentcolor`](/en-US/docs/Web/CSS/color_value) (including {{cssxref('caret-color')}}, {{cssxref('outline-color')}}, {{cssxref('text-decoration-color')}}, {{cssxref('column-rule-color')}}, etc.) would return `rgb(255 0 0)`. The link has inherited `font-weight: bold;` from the paragraph's styles, listing it as `font-weight: 700`. Custom properties, like our `--color: red`, are properties. As such, they are accessible via `get()`. You'll note that custom properties retain the value as written in the stylesheet, whereas computed styles will be listed as the computed value — {{cssxref('color')}} was listed as an [`rgb()`](/en-US/docs/Web/CSS/color_value) value and the {{cssxref('font-weight')}} returned was `700` even though we use a {{cssxref('<color>', 'named color')}} and the `bold` keyword. @@ -252,14 +252,14 @@ Let's examine a CSS example with several custom properties, transforms, `calc()` ```css :root { - --mainColor: hsl(198, 43%, 42%); - --black: hsl(0, 0%, 16%); - --white: hsl(0, 0%, 97%); + --mainColor: hsl(198 43% 42%); + --black: hsl(0 0% 16%); + --white: hsl(0 0% 97%); --unit: 1.2rem; } button { - --mainColor: hsl(198, 100%, 66%); + --mainColor: hsl(198 100% 66%); display: inline-block; padding: var(--unit) calc(var(--unit) * 2); width: calc(30% + 20px); diff --git a/files/en-us/web/api/cssfontpalettevaluesrule/overridecolors/index.md b/files/en-us/web/api/cssfontpalettevaluesrule/overridecolors/index.md index bb1d05c647da2f6..579e3c7db191659 100644 --- a/files/en-us/web/api/cssfontpalettevaluesrule/overridecolors/index.md +++ b/files/en-us/web/api/cssfontpalettevaluesrule/overridecolors/index.md @@ -49,15 +49,15 @@ This example first defines a few at-rules, among them two {{cssxref("@font-palet @font-palette-values --blue { font-family: "Noto Color Emoji"; override-colors: - 3 rgb(1, 28, 193), - 4 rgb(60, 124, 230); + 3 rgb(1 28 193), + 4 rgb(60 124 230); } @font-palette-values --green { font-family: "Noto Color Emoji"; override-colors: - 3 rgb(28, 193, 1), - 4 rgb(34, 230, 1); + 3 rgb(28 193 1), + 4 rgb(34 230 1); } .colored-hat { diff --git a/files/en-us/web/api/cssstyledeclaration/setproperty/index.md b/files/en-us/web/api/cssstyledeclaration/setproperty/index.md index cb4100c575c133f..6d9b741de86b14a 100644 --- a/files/en-us/web/api/cssstyledeclaration/setproperty/index.md +++ b/files/en-us/web/api/cssstyledeclaration/setproperty/index.md @@ -154,7 +154,7 @@ function random(min, max) { } function randomColor() { - return `rgb(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)})`; + return `rgb(${random(0, 255)} ${random(0, 255)} ${random(0, 255)})`; } const stylesheet = document.styleSheets[1]; diff --git a/files/en-us/web/api/document_object_model/examples/index.md b/files/en-us/web/api/document_object_model/examples/index.md index b116b9c5cbd1001..591c3dd6cdf985b 100644 --- a/files/en-us/web/api/document_object_model/examples/index.md +++ b/files/en-us/web/api/document_object_model/examples/index.md @@ -239,7 +239,7 @@ However, stopEvent also calls an event object method, {{domxref("event.stopPropa ## Example 6: getComputedStyle -This example demonstrates how the {{domxref("window.getComputedStyle")}} method can be used to get the styles of an element that are not set using the `style` attribute or with JavaScript (e.g., `elt.style.backgroundColor="rgb(173, 216, 230)"`). These latter types of styles can be retrieved with the more direct {{domxref("HTMLElement.style", "elt.style")}} property, whose properties are listed in the [DOM CSS Properties List](/en-US/docs/Web/CSS/Reference). +This example demonstrates how the {{domxref("window.getComputedStyle")}} method can be used to get the styles of an element that are not set using the `style` attribute or with JavaScript (e.g., `elt.style.backgroundColor="rgb(173 216 230)"`). These latter types of styles can be retrieved with the more direct {{domxref("HTMLElement.style", "elt.style")}} property, whose properties are listed in the [DOM CSS Properties List](/en-US/docs/Web/CSS/Reference). `getComputedStyle()` returns a {{domxref("CSSStyleDeclaration")}} object, whose individual style properties can be referenced with this object's {{domxref("CSSStyleDeclaration.getPropertyValue()", "getPropertyValue()")}} method, as the following example document shows. @@ -278,7 +278,7 @@ This example demonstrates how the {{domxref("window.getComputedStyle")}} method