Adam Argyle @argyleink Twitter profile | Pikagi

Pikagi

Adam Argyle

@argyleink

52,886

Followers

1,427

Following

3,517

Media

19,610

Statuses

#CSS #UI DevRel @GoogleChrome , @CSSWG member, host on #GUIchallenges , co-host: #CSSpodcast and #BADatCSSpodcast , maker of VisBug, @OpenProps and

Seattle

https://t.co/mvJKECAPmF

Joined April 2010

Don't wanna be here? Send us removal request.

Pinned Tweet

@argyleink

Adam Argyle

10 months

calc() var() clamp() fit-content(), repeat() min(), max() attr() env() color(), rgb(), hsl(), oklch() circle(), polygon() url() translate(), scale(), rotate() matrix() invert() sin(), cos(), tan(), pow(), hypot(), log() steps() scroll(), view() def not a programming language

46

208

2K

Last Seen Profiles

@0xAllen_

@Nftxos

@Auth_Courtney

@ItsThumper76

@chaddukes

@MolliesGame

@A7RMD

@markyptweets

@yuge_gx

@frontendeval

@bbva

@Carters

@agent_luck

@puenteadrian

@obyezeks

@__imsococky

@gekikarashiko

@DeKalbDCCUSD

@kscerato

@MampuyaPierrot

@fehgalvao_

@Gratefvl_

@deIenart

@DannyPayne16

@DailyBee3

@DailyBee3

@PlusLINEUPS

@behvosoghi

@allriselaw

@lana_privoff

@rctb1899

@BluegrassScenes

@shekhar_mande

@roscoe

@bieIws

@haashoficial

@argyleink

Adam Argyle

4 years

4 layouts for the price of 1, thanks flex 👍 css` form { display: flex; flex-wrap: wrap; & > input { flex: 1 1 10ch; margin: .5rem; &[type="email"] { flex: 3 1 30ch; } } } ` view source on Codepen 👇

79

2K

8K

@argyleink

Adam Argyle

5 years

#CSS :is() selector 🎉 the successor to :any() and :matches() sneak peak into our talk, here's a neat gif I made with XD showing what the :is() selector syntax can do. be excited for Chrome Dev Summit y'all!

51

2K

5K

@argyleink

Adam Argyle

3 years

make taps 300ms faster with 1 line of CSS: ``` #css touch-action: manipulation; ``` means: element doesn't want double-tap to zoom result: browser *immediately* responds to taps instead of waiting 300ms for a "potential" 2nd tap 🤓 caniuse (YES!)

Tweet media one

20

643

3K

@argyleink

Adam Argyle

1 year

Can you believe these slides are full page loads to completely new HTML pages‽ #smashingconf ^ try it with Canary and enable the flag chrome://flags/ #view -transition-on-navigation what. rad. tech. 🤯

39

395

3K

@argyleink

Adam Argyle

4 years

CSS Gradient Text 🤘💀

Tweet media one

Tweet media two

29

455

3K

@argyleink

Adam Argyle

3 years

make focus a little more engaging ```css @media (prefers-reduced-motion: no-preference) { :focus { transition: outline-offset .25s ease; outline-offset: 5px; } } ``` try it

28

448

3K

@argyleink

Adam Argyle

4 years

How slick :is(this CSS!?) 😏 removes the margins on all headers with a `.tight` class h1.tight, h2.tight....... 🤢 :is(h1,h2).tight { 🤓 }

Tweet media one

37

440

3K

@argyleink

Adam Argyle

4 years

.logo { display: flex; place-items: center; gap: .5ch; font-size: 20vmin; } .logo > img { max-block-size: 1.25em; } 🤩 logo img height is 125% of a responsive font-size (20vmin) letter M.. relative units are so cool!

21

433

3K

@argyleink

Adam Argyle

4 years

🎉 flex that gap in the latest release of Chrome Canary 🎉 ```css display: flex; 🦾 gap: 1ch; 🔥 ``` early adopters: help us test it out won't ya!? note: requires web experiments enabled, visit chrome://flags/ #enable -experimental-web-platform-features in Canary to enable

70

648

3K

@argyleink

Adam Argyle

10 months

I can't stop seeing #CSS View Transitions! here I'm animating new `node.textContent`, letting the browser handle the morph while bringing in custom animations (and stagger) for stage enter and stage exit 🥲 try it

19

273

2K

@argyleink

Adam Argyle

3 years

media-queries-4 making confusing queries much simpler 😍 caniuse (Firefox only atm) CSS spec PostCSS plugin ⭐️ to show Chromium you want it

34

495

2K

@argyleink

Adam Argyle

1 month

PREVIOUSLY: separate rulesets for light and dark NOW: one ruleset with `light-dark()`

@bramus

Bramus

2 months

New article got published: CSS `color-scheme`-dependent colors with `light-dark()` 🔗

Tweet media one

11

88

473

20

303

2K

@argyleink

Adam Argyle

3 years

CSS Gradient Shadow 😎 A pseudo-element, sized and positioned within the container, offset + scaled with transforms, then blurred with filters demo

Tweet media one

Tweet media two

27

286

2K

@argyleink

Adam Argyle

3 years

full-screen scroll-snap starter? here! 🙂 ```css html { scroll-snap-type: y; } section { scroll-snap-align: center; block-size: 100vh; /* optional */ scroll-snap-stop: always; } ```

26

368

2K

@argyleink

Adam Argyle

2 years

Announcing Open Props 🎉 350 ✨free✨ CSS variables

Tweet card media

Open Props: sub-atomic styles

Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.

open-props.style

48

491

2K

@argyleink

Adam Argyle

10 months

View Transition powered drag n' drop! just drag events then swappin DOM, #CSS view transitions doin all the animation work (which it's GREAT AT) 🤯 that animated emoji don't miss a beat try it!

@argyleink

Adam Argyle

10 months

I can't stop seeing #CSS View Transitions! here I'm animating new `node.textContent`, letting the browser handle the morph while bringing in custom animations (and stagger) for stage enter and stage exit 🥲 try it

19

273

2K

22

247

2K

@argyleink

Adam Argyle

4 years

#CSS media queries conditionally *apply* styles, BUT did you know they can conditionally *load* styles too? This tasty sip pairs well with a main course of CSS bundle splitting 👍

Tweet media one

15

405

2K

@argyleink

Adam Argyle

4 years

CSS conic-gradient borders 🤘💀

Tweet media one

Tweet media two

27

353

2K

@argyleink

Adam Argyle

3 years

typography and copy editing 🔥 tip ✅ word break with <wbr> and/or ```html <h1>superlongword</h1> <h1>super<wbr>long<wbr>word</h1> <h1>superlongword</h1> ``` try it! learn more

19

460

2K

@argyleink

Adam Argyle

3 years

user adaptive frosted glass 😎 ``` #css .adaptive-glass { --glass-lightness: 100%; background: hsl(0 0% var(--glass-lightness) / 50%); backdrop-filter: blur(40px); @media (prefers-color-scheme: dark) { --glass-lightness: 0%; } } ``` 👀

Tweet media one

Tweet media two

Tweet media three

14

245

2K

@argyleink

Adam Argyle

3 years

Explode A Node! an interactive CSS box model experience 🤓 source on @CodePen -

30

290

2K

@argyleink

Adam Argyle

4 years

``` #CSS width: calc(50% - 2ch); min-width: 20ch; max-width: 70ch; ``` OR ``` width: clamp(20ch, 50% - 2ch, 70ch); ``` aka: optimally half the page minus some space.. but cap it at a healthy reading count of 70 characters while never under 20ch! play 👉

14

380

2K

@argyleink

Adam Argyle

4 years

bored of your #CSS easing? try a new one! Here's 18 pop choices 🤓 example: --ease-out-expo: cubic-bezier(.19, 1, .22, 1); gist play/fork

Tweet media one

13

301

2K

@argyleink

Adam Argyle

4 years

rgb() ⇒ rgba() just to add transparency? 🤢 hsl() ⇒ hsla() ... 😭 GOOD NEWS! fixed in CSS color-level-4, rgb() & hsl() accept a 4th parameter 🎉 color demo color level 4 docs 🔥 tips - try in your fav browser! - drop comma's!

31

489

2K

@argyleink

Adam Argyle

1 year

#CSS `text-wrap: balance` ❤️

Tweet media one

31

174

2K

@argyleink

Adam Argyle

4 months

#CSS Neue Bento ✅ grid layout ✅ :has() quantity queries ✅ aspect-ratio container queries ✅ view transitions for flare

12

207

2K

@argyleink

Adam Argyle

3 years

`font-size: min(100%, 16px);` opt your UI out of iOS zooming when inputs are tapped [video alt] a <select> element is tapped before and after it's font-size is changed, and in one case the device zooms to the <select>, the other it doesn't

15

209

1K

@argyleink

Adam Argyle

5 years

animation happening too fast you can't figure it out? pop open devtools, open the animations panel (), then slow time to 25% or scrub a timeline like me! .drips 👀 give it a shot on this rad Codepen why don't ya?

19

352

1K

@argyleink

Adam Argyle

4 years

Opposing corner radial gradients look softer than angled linear gradients: #CSS background-image: radial-gradient( circle at top right, cyan, transparent ), radial-gradient( circle at bottom left, deeppink, transparent ) ; play

Tweet media one

Tweet media two

Tweet media three

20

226

1K

@argyleink

Adam Argyle

4 years

TIL CSS can check for a font installed locally before fetching it remotely! #perfmatters Shout out to Dank Mono, my favorite ligature featured coding font

Tweet media one

29

304

1K

@argyleink

Adam Argyle

4 years

🆕 <angle> DevTool ✨ in Canary now ✨ try out an early version today! 👍 A CSS component for quick visual access to angle direction. Thoughts!?

36

224

1K

@argyleink

Adam Argyle

4 years

CSS conic-gradient() filled text 🎉 background: conic-gradient( hsl(100 100% 60%), hsl(200 100% 60%), hsl(100 100% 60%) ) fixed; bonus: fixed position = radness during scroll

8

233

1K

@argyleink

Adam Argyle

9 months

Took 30m to make this! viva View Transitions 🤘🏻💀

15

140

1K

@argyleink

Adam Argyle

4 years

💯 CSS flex gap is in Chrome 84 💯 play around at this sandbox on @codepen 👇

@argyleink

Adam Argyle

4 years

🎉 flex that gap in the latest release of Chrome Canary 🎉 ```css display: flex; 🦾 gap: 1ch; 🔥 ``` early adopters: help us test it out won't ya!? note: requires web experiments enabled, visit chrome://flags/ #enable -experimental-web-platform-features in Canary to enable

70

648

3K

12

314

1K

@argyleink

Adam Argyle

4 years

#lintHTMLwithCSS this selector hunts for links that have: - no href - an empty href - a "#" href (button perhaps?)

Tweet media one

24

197

1K

@argyleink

Adam Argyle

3 years

If I'm making "hover to reveal" UI interactions, I like to put them behind the CSS hover capability media query 🤓 Then I'm not hiding content from a user who viewing without the capability to reveal it 👍🏻

Tweet media one

13

163

1K

@argyleink

Adam Argyle

3 years

v2 = no 100vh side effects! ``` #css html, body, section { block-size: 100%; } html { scroll-snap-type: y; } section { scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; } ```

@argyleink

Adam Argyle

3 years

full-screen scroll-snap starter? here! 🙂 ```css html { scroll-snap-type: y; } section { scroll-snap-align: center; block-size: 100vh; /* optional */ scroll-snap-stop: always; } ```

26

368

2K

16

218

1K

@argyleink

Adam Argyle

4 years

I enjoy modern CSS syntax so much! Here I target article headers that directly follow a paragraph 🤓

Tweet media one

Tweet media two

15

151

1K

@argyleink

Adam Argyle

11 months

Kickin the tires of @figma 's.. NEW ✨Dev Mode✨ PLUS ✨Figma for VS Code✨

Tweet media one

Tweet media two

Tweet media three

Tweet media four

8

168

1K

@argyleink

Adam Argyle

3 years

CSS date/time picker concept: grid + scroll-snap-points demo Codepen

19

200

1K

@argyleink

Adam Argyle

4 years

✅ style if mobile ✅ style if desktop ✅ style if stylus ✅ style if controller ✅ combine together 🎉 spec caniuse

Tweet media one

15

270

1K

@argyleink

Adam Argyle

4 years

CSS grid has some rad shorthand! Here's a little sample of what y'all can do with it 💀🤘

9

202

1K

@argyleink

Adam Argyle

10 months

#CSS Radiento a bento box radio group design with View Transition animations plus custom "squish" easing from Open Props 🤓 ✅ grid layout ✅ no abs positions ✅ visual transition is an upgrade ✅ respects reduced motion ✅ keyboard still rocks

6

152

1K

@argyleink

Adam Argyle

4 years

in Chromium 86 now: 1-click #accessibility color contrast correction for AA and AAA ratios 🎉 Struggle to fix failing contrast ratios? Tired of the guess and check? @ChromeDevTools has your back. Here's a video of me fixing a few pesky ratio's with the new feature 👍

19

340

1K

@argyleink

Adam Argyle

4 years

🎨 a 4 corner layered gradient by stacking 2 simple linear gradients and using a linear mask to blend them together! 1 red to cyan gradient 1 hotpink to rebeccapurple gradient and a mask-image: linear-gradient(to bottom, transparent, black); codepen

Tweet media one

Tweet media two

17

149

1K

@argyleink

Adam Argyle

4 years

6 Different #CSS Centering Grid & Flex Layouts 👍 `place-items: center` `place-content: center` when used with.. `display: flex` vs `display: grid` What's the difference? What do they even do?! I got ya 👇🤓

Tweet media one

Tweet media two

13

192

976

@argyleink

Adam Argyle

1 year

Announcing… 🥁 A modern #CSS gradient and color picking tool for next-gen gradients: - explore color spaces - export modern and classic CSS - explore gradient features - share them - learn rad tips & tricks Chrome and Safari only (but not for long!)

Tweet media one

22

174

954

@argyleink

Adam Argyle

4 years

🆕 in Chrome Canary: dynamic contextual flexbox alignment icons! Intent is to assist you by projecting a minimap of the alignment 🗺 Let us know if these help!

Tweet media one

27

165

928

@argyleink

Adam Argyle

4 years

#lintHTMLwithCSS this selector hunts for lists that have something other than an <li> inside

Tweet media one

15

125

927

@argyleink

Adam Argyle

10 months

Animate every element as it enters the viewport (not saying to do this lol) with just a few lines of CSS 😈 I love the ✨natural stagger✨ this effect has, since it's duration/length and intersection with the viewport, is on an item by item basis 🤓

21

102

933

@argyleink

Adam Argyle

3 years

CSS Nesting 1 spec has it's 1st working public draft (not just a draft anymore!) 📄 Here's 4 examples to help get your ramped up and stoked 🤓

Tweet media one

Tweet media two

Tweet media three

Tweet media four

23

215

914

@argyleink

Adam Argyle

3 years

CSS "individual transforms" in 2021 we'll see these in a lot more styles! Firefox has it, Safari tech preview has it, and Chrome's nearly finished. value: - composable transforms - single transform access - write less read more in the spec

23

175

910

@argyleink

Adam Argyle

3 years

Wondering how sites like Github have nice dark form controls? You gotta set the color-scheme! ✅ enable from CSS (whole page or per selector) ✅ enable from HTML (page can prepare early for your dark scheme) lots more on -

Tweet media one

Tweet media two

Tweet media three

3

171

904

@argyleink

Adam Argyle

9 months

Experimental #CSS carousel ✅ subgrid ✅ scroll driven animations (SDA) ✅ oklch() ✅ @property ✅ @layer *Lots of code comments* to help break down the effects 🤓 ✅ SDA changes hue/theme ✅ SDA toggles next/prev ✅ SDA syncs dots

13

128

823

@argyleink

Adam Argyle

3 years

You can use #CSS to tailor UX writing based on device capabilities 🤓 Here I instruct the user to either hover or tap, depending on if the device can hover or not 👍🏻

Tweet media one

Tweet media two

14

119

809

@argyleink

Adam Argyle

3 years

"UX/UI Designers are forced to design in px, in a world where accessibility is a legal requirement"

Tweet card media

Why designers should move from px to rem — and how to do that in Figma

Designing with accessibility in mind.

10

152

817

@argyleink

Adam Argyle

2 years

teach a label element to give itself a nice layout upgrade when it's wrapping a checkbox we :has()'nt seen nothing yet with :has()

Tweet media one

12

97

812

@argyleink

Adam Argyle

4 years

#CSS Media Scroller Layout with Grid 🤓 stumble along with me on YouTube 👉 find the code on @CodePen

12

130

805

@argyleink

Adam Argyle

3 years

get a callback when the user changes theme 🤓 bonus: snatch that `matches` prop and make it more readable while you're at it

Tweet media one

10

92

790

@argyleink

Adam Argyle

3 years

LET CSS PICK AN ACCESSIBLE COLOR! `color-contrast()` will automatically pick a color that passes contrast ratios, just give it a list to choose from. aka: throw colors at it! ``` #css body { background: var(--blue2); color: var(--onblue2); } ```

Tweet media one

@argyleink

Adam Argyle

3 years

Red won! ``` #css color-contrast(black vs blue, red, green) ``` This function returns the color which contrasts the most with the 1st color. ⚠️ LET CSS ENSURE YOU PASS CONTRAST SCORES ⚠️

Tweet media one

4

8

52

16

160

778

@argyleink

Adam Argyle

3 years

user in data saver mode? skip the media, save loads! ```css @media (prefers-reduced-data: reduce) { img, video { display: none; } } ``` (Canary behind a flag only) enjoy NICE page performance boosts and $$ data savings as the user is mostly browsing text. wins for all!

Tweet media one

Tweet media two

Tweet media three

16

142

763

@argyleink

Adam Argyle

4 years

DevTools now shows you a preview of a background image in your CSS!

Tweet media one

9

109

761

@argyleink

Adam Argyle

4 months

h1 { line-height: 1cap; }

Tweet media one

17

63

767

@argyleink

Adam Argyle

3 years

#CSS trick - Bouncy Overscroll 🪄 Flank a scroll snapping layout with unsnappables 🤓 result: as users scroll to an edge, it'll snap back to the nearest snappable with built-in inertia / timing 🕹 try it

12

127

748

@argyleink

Adam Argyle

16 days

#CSS `paint-order`

Tweet media one

Tweet media two

11

107

750

@argyleink

Adam Argyle

4 years

boop. 👋 bye trailing space on paragraphs, I'll be giving the ownership of that to your container. k thanks, bye

Tweet media one

5

87

705

@argyleink

Adam Argyle

4 years

my #CSS typography for headers lately: - unitless liquid line height - wraps on wide/long (less legible!) headlines - 1 liner liquid font size color / spacing belong to the rest of the system, but I just tweak those values for my type system. sandbox 👉

Tweet media one

10

94

701

@argyleink

Adam Argyle

6 months

#CSS

Tweet media one

14

73

702

@argyleink

Adam Argyle

2 years

Atomic CSS Keyframes ✅ smaller purpose ✅ composable code example: slide fade in, wait 3s, fade out

Tweet media one

Tweet media two

10

92

694

@argyleink

Adam Argyle

1 year

fun single div, tail chasing circular loader, can be tweaked to a few different looks and is responsive try it on Codepen

8

102

675

@argyleink

Adam Argyle

4 years

feelin like a blob? feel like makin a blob?

12

103

668

@argyleink

Adam Argyle

2 years

``` #css -webkit-mask-image: linear-gradient(to right, #0000 , #000 , #000 , #0000 ) ``` wrote that last night to give a horizontal scroller a nice "scroll hint" by masking it's edges; scroller edge fades try it

19

75

676

@argyleink

Adam Argyle

3 years

Wanna change a parent with CSS‽ Check out `:has` Getting prototyped in Chromium by @igalia 🎉, they believe they've "gathered enough information and data on this that we feel like we're ready to share it for wider review and discussion, productively"

Tweet media one

@briankardell

bkardell 🐦

3 years

New Post: I would say that I am unreasonably excited about this, but.. it doesn't seem unreasonable! Today @igalia will file an intent to prototype :has() - here's a bunch of information on why/how/what this means. Thanks to @eyeo for sponsoring the work

5

48

115

11

149

665

@argyleink

Adam Argyle

4 years

1-Line Layouts by @Una “10 modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of styling code can be” - 🦄 watch it 📼 visit it 📃 my favorite 4 😁👇

Tweet media one

Tweet media two

Tweet media three

Tweet media four

3

128

646

@argyleink

Adam Argyle

3 years

`accent-color: hotpink;` 🎉 Chromium is prototyping the style feature for forms! I couldn't wait, so I went and tried it out in a custom build. Here it is! hotpink checkboxes with 1 line of CSS 😎 CSS Spec ChromeStatus

Tweet media one

8

137

630

@argyleink

Adam Argyle

4 years

Use #CSS to customize HTML list bullets (and more!) in the upcoming Chromium 86 release (Canary or Beta today) 🆕 individual && global selectors li::marker { color: var(--neon-pink); } li:first-child::marker { font-size: 1ex; } Learn more 👉

Tweet card media

Custom bullets with CSS ::marker | Articles | web.dev

Use CSS to to customize the color, size or type of numbers or bullets in `` or `` elements.

10

166

623

@argyleink

Adam Argyle

4 years

scroll position = theme hue scroll 🏳️‍🌈 🙂 set --hue on scroll with JS: ```js document.body.onscroll = () => .setProperty('--hue', window.scrollY / 10) ``` use --hue from CSS: ```css color: hsl(var(--hue) 90% 80%); ``` Codepen

9

116

619

@argyleink

Adam Argyle

1 year

subtle UX tip: use `line-height` instead of padding to create vertical space in your inputs for uncramped text highlights try it on Codepen

19

63

610

@argyleink

Adam Argyle

4 years

TIL about the CSS media query `prefers-reduced-data` 💀🤘 If users have data saver on: - deliver smaller images or just a gradient - smarter <picture> <source>'s - more!? proposal spec rad work @hj_chen ! 🎉

Tweet media one

5

182

610

@argyleink

Adam Argyle

2 years

Gradient Border with Rounded Corners just made this demo for someone, figured I'd share it here too: 1. transparent border to create the size and space 2. a border radius 3. a gradient filled to the border-box, a white layer on top in the padding-box

Tweet media one

Tweet media two

14

73

603

@argyleink

Adam Argyle

3 years

boxes are 2 lines of CSS now btw ``` #css .box { aspect-ratio: 1; width: 100px; } ``` set a width OR height, get a box thx aspect-ratio 👍🏻 (Chrome 88+, Safari TP, Firefox behind a flag) caniuse -

Tweet media one

14

106

593

@argyleink

Adam Argyle

3 years

Hello Safari 123 CSS grid tools 🤓

Tweet media one

10

90

591

@argyleink

Adam Argyle

11 months

❤️ #CSS View Transitions this API can do like anything! even animate `display: none` 🤯 this demo: 1. copies what you type into the `<pre>` 2. calls `document.startViewTransition()` if available 3. then pastes into a `<style>` tag! animated local dev.

7

90

593

@argyleink

Adam Argyle

2 years

make keyboard interaction a little more engaging ``` #css @media (prefers-reduced-motion: no-preference) { :focus { transition: outline-offset .25s ease; } :focus:not(:active) { outline-offset: 5px; } } ``` try it

@argyleink

Adam Argyle

3 years

make focus a little more engaging ```css @media (prefers-reduced-motion: no-preference) { :focus { transition: outline-offset .25s ease; outline-offset: 5px; } } ``` try it

28

448

3K

4

84

623

@argyleink

Adam Argyle

5 years

new in Canary @ChromeDevTools : Copy authored CSS Another VisBug inspired feature 🎉 Where VisBug can copy computed styles off any element, now DevTools can now copy authored styles off any element! Both copy to the clipboard; aka lift & shift them wherever you want 💀🤘

10

153

581

@argyleink

Adam Argyle

11 months

#CSS Morphing Stateful Button with ✨View Transitions✨ chuck different messages and icons at it, it'll morph beautifully to adapt

13

50

579

@argyleink

Adam Argyle

4 years

need a horizontal scrollview in #CSS ? here's some props to know! `overflow` what do you do when children are bigger than you? iOS overflow: 😅 `scroll-behavior` jump or animate to anchors `overscroll-behavior` when scrolling beyond this scrollview, allow or capture events

Tweet media one

3

97

577

@argyleink

Adam Argyle

2 years

I still find many folks don't know these place alignment shorthands exist!

@argyleink

Adam Argyle

4 years

6 Different #CSS Centering Grid & Flex Layouts 👍 `place-items: center` `place-content: center` when used with.. `display: flex` vs `display: grid` What's the difference? What do they even do?! I got ya 👇🤓

Tweet media one

Tweet media two

13

192

976

11

79

569

@argyleink

Adam Argyle

4 years

DON'T: reject users DO: respect users #CSS #UX

Tweet media one

Tweet media two

8

78

574

@argyleink

Adam Argyle

5 months

`field-sizing: content` makes a <textarea> automagically grow to fit what folks type in it ✨

@intenttoship

Intent To Ship

5 months

Blink: Intent to Ship: field-sizing CSS property

0

3

49

15

47

573

@argyleink

Adam Argyle

9 months

Animates <table> ✅ row.remove() ✅ table.insertAdjacentHTML() ❤️‍🔥 special animation like the table is crushing a row out of existence hehe ✅ used devtools in the vid to slowmo the effect viva View Transitions: src on Codepen:

9

85

569

@argyleink

Adam Argyle

3 years

#CSS `::first-line` A dynamic and responsive pseudo selector that targets the first line of text. p::first-line { font-style: bold; background: hotpink; color: white; } See how ::first-line adapts to text wrapping, super cool!

4

70

547

@argyleink

Adam Argyle

3 years

Game menu in HTML n' CSS! 🎮 try a keyboard, gamepad, screen reader, mouse, & touch! 🤓 demo

7

61

544

@argyleink

Adam Argyle

3 years

Virtual Keyboard API 😍 "developers can use [virtual keyboards] to enable better customization of their webpage's content and experiences." ```js navigator.virtualKeyboard.overlaysContent = true ``` ```css env(keyboard-inset-height) ``` learn more 🔎

Tweet media one

14

130

545

@argyleink

Adam Argyle

2 years

```JS if (progress.value == '100' && progress.max == '100') { // progress complete } ``` ```CSS progress[value="100"][max="100"] { /* progress complete */ } ``` While CSS has no if statements, you can definitely use it similarly 👍🏻

Tweet media one

Tweet media two

10

75

546

@argyleink

Adam Argyle

4 months

All of these work GREAT with Scroll Driven Animation btw 🤓

Tweet card media

argyleink/transition.css

Drop-in CSS transitions

www.transition.style

@mgechev

Minko Gechev

3 years

CSS tip: on by @argyleink you can find 46 drop-in CSS transitions ✨

15

382

2K

4

75

540

@argyleink

Adam Argyle

3 years

I love this one, use it all the time! Logical properties ❤️❤️❤️

@eladsc

Elad Shechter

3 years

#CSS Positions got the 'inset' property, a shorthand to describe all the directions combined. Now has full support in all the updatable browsers.

Tweet media one

32

875

4K

4

76

541

@argyleink

Adam Argyle

4 months

5 CSS features for 2024 that every front-end developer should know: 1. :has() 2. subgrid 3. nesting 4. text-wrap: balance 5. container units

5 CSS snippets every front-end developer should know in 2024 | Articles | web.dev

Toolbelt worthy, powerful, and stable CSS you can use today.

6

112

541