💡 2 CSS tips for textareas: 1️⃣ Use `field-sizing:... content` to make the textarea auto-resize to its content 2️⃣ Use `lh` units to set the height in the font's computed line-height unitsshow more

`field-sizing: content` lets you autosize textareas in css but... what if you want the height to transition instead of snap? wrap it and sync the wrapper height with a ResizeObserver ↓show more

Design Engineering Tip Consider letting textareas grow with the... content instead of introducing nested scrolling. It often creates a smoother writing experience and keeps forms easier to scan. CSS: textarea { field-sizing: content; }show more

Skip writing complex JavaScript to make form elements like... textarea fit user input 🍝 The field-sizing CSS property is a newly available Baseline feature that lets form controls naturally adjust their sizing to fit their contents. Find the documentation here →show more

extra detail: animate a CSS custom property from 0... to 100 on scroll and use that for a counter() label::after { content: counter(complete) '% complete'; } translate the label using container query units ✨ translate: 0 calc(var(--p) * 1cqh);show more

one trick behind this demo 👇🎞️ .images { translate:... 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙show more

Not uncommon to see checkbox implementations make use of... align-items: center which results in some awkward input positioning when the label text wraps. Instead you can make use of baseline which will align nicely across different line-height implementations.show more

gonna start measuring snow height in units of Corgi

don't know the size of a container in CSS?... container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇show more

Use Qwen Code to parse the PDF document into... markdown content, and then translate it. Follow us for more AI tips and updates!show more

We're transitioning into the height of Summer ☀️ Here's... some tips on how to get the most out of the season in #AssassinsCreedShadows. 🎨 Paint the legendary White Tanuki (only available in Summer). 🌊 Use bodies of water like ponds as camouflage. 🌿 More foliage to keep hidden.show more

✍️ New Article: Better fluid sizing with round() I... wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. 🔗show more

¡POR FIN podremos hacer esto con CSS! Cambiar el... tamaño de un textarea según su contenido. Es la nueva propiedad "form-sizing: content". Aquí te dejo una demostración:show more

Only a few days left to enter in the... Pixels Creator Contest. 1️⃣ Create content announcing Pixels coming to Ronin 🙌🏼 2️⃣ Reply to the original post below with your content 3️⃣ Submit the link to the "Pixels Creator Contest" quest on Moku HQshow more

CSS shape() is now Baseline Newly Available → The... shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().show more

"Someone should learn the correct use of height from... this baboon!"show more

‼️NEW FREE UNITS EVENT REVEALED Head to Cyclops on... the new Krakoa social hub map and claim daily units for 7 days in a row, up to 300 units per day. Also, invite friends to the 'Tandem Tides' event to unlock limited-time rewardsshow more

CSS tip: you can finally animate to height: auto.... :root { interpolate-size: allow-keywords; } .panel { transition: height 0.3s; } Accordions open and close smoothly, no JS measuring. Browsers without support just snap, so it's safe to ship today.show more