drago.cc

Using CSS grid with grid-area can be useful in certain circumstances, and especially for stacking elements without using position: absolute. For example, there's a particularly clever trick that can be used to make textarea and input elements automatically resize based on their contents.

Here's what the different versions of the shorthand translate to:

/* 4 */
grid-area: 0 / 0 / 1 / 1;
grid-area: 0 / /* grid-row-start /                            */
           0 / /* grid-column-start /                         */
           1 / /* grid-row-end /                              */
           1;  /* grid-column-end;                            */

/* 3 */
grid-area: 0 / 0 / 1;
grid-area: 0 / /* grid-row-start /                            */
           0 / /* grid-column-start /                         */
           1;  /* grid-row-end /                              */
               /* <grid-column-start's custom-ident or auto>; */

/* 2 */
grid-area: 0 / 0;
grid-area: 0 / /* grid-row-start /                            */
           0;  /* grid-column-start /                         */
               /* <grid-row-start's custom-ident or auto> /   */
               /* <grid-column-start's custom-ident or auto>; */

/* 1 */
grid-area: 0;
grid-area: 0; /* grid-row-start /                            */
              /* <grid-row-start's custom-ident or auto> /   */
              /* <grid-row-start's custom-ident or auto> /   */
              /* <grid-row-start's custom-ident or auto>;    */

https://www.assemblyscript.org/

https://twitter.com/housecor/status/1434124665740537860

https://css-tricks.com/the-shapes-of-css/

When creating custom interfaces around the HTML5 <audio> and <video> elements, make sure you hide the volume control if the user is on iOS. According to Apple's documentation, the volume property of <audio> and <video> elements is read-only, and always returns 1:

On iOS devices, the audio level is always under the user’s physical control. The volume property is not settable in JavaScript. Reading the volume property always returns 1.

— iOS-Specific Considerations for Safari HTML5 audio and video, under the "Volume Control in JavaScript" section.