CSS grid-area shorthand

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

September 11, 2021 at 5:12 PM

iOS prevents changes to volume property of <audio> and <video> elements

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.

August 18, 2021 at 12:11 AM