Log inSign up
Image
user avatar
Adam Argyle
@argyleink
@Shopify design-engineer; prior @GoogleChrome, @GoogleCloud, CSSWG, and CSS Podcast. Host on @whiskeywebfm, maker of @OpenProps, gradient.style and more
Seattle
nerdy.dev
Joined April 2010
1,506
Following
58.6K
Followers
  • Pinned
    user avatar
    Adam Argyle
    @argyleink
    Feb 3
    Wild how far you can push "customizable select" with just #CSS
    Image
    00:00
    99K
  • user avatar
    Adam Argyle
    @argyleink
    Jan 14, 2020
    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 👇 codepen.io/argyleink/pen/…
    Image
    00:00
  • user avatar
    Adam Argyle
    @argyleink
    Nov 7, 2019
    #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! developer.chrome.com/devsummit/
    Image
    GIF
  • user avatar
    Adam Argyle
    @argyleink
    Jun 18, 2021
    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!) caniuse.com/mdn-css_proper…
    a, button { touch-action: manipulation; }
  • user avatar
    Adam Argyle
    @argyleink
    Apr 11, 2025
    G̶o̶o̶g̶l̶e̶r̶… ex-Googler.
    Image
    G̶o̶o̶g̶l̶e̶r̶… ex-Googler. · April 10, 2025
    From nerdy.dev
    750K
  • user avatar
    Adam Argyle
    @argyleink
    May 25, 2023
    Can you believe these slides are full page loads to completely new HTML pages‽ #smashingconf smashing-transitions.netlify.app ^ try it with Canary and enable the flag chrome://flags/#view-transition-on-navigation what. rad. tech. 🤯
    Image
    00:00
    457K
  • user avatar
    Adam Argyle
    @argyleink
    Jul 10, 2020
    CSS Gradient Text 🤘💀 codepen.io/argyleink/pen/…
    example image showing gradient text with the words "Gradient Text"
    Image
  • user avatar
    Adam Argyle
    @argyleink
    Apr 27, 2021
    make focus a little more engaging ```css @Media (prefers-reduced-motion: no-preference) { :focus { transition: outline-offset .25s ease; outline-offset: 5px; } } ``` try it codepen.io/argyleink/pen/…
    Image
    00:00
  • user avatar
    Adam Argyle
    @argyleink
    Oct 13, 2020
    How slick :is(this CSS!?) 😏 removes the margins on all headers with a `.tight` class h1.tight, h2.tight....... 🤢 :is(h1,h2).tight { 🤓 }
    :is(h1,h2,h3,h4,h5,h6).tight { margin-block: 0; }
  • user avatar
    Adam Argyle
    @argyleink
    Sep 12, 2020
    .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! codepen.io/argyleink/pen/…
    Image
    00:00
  • user avatar
    Adam Argyle
    @argyleink
    Apr 27, 2020
    🎉 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
    Image
    00:00
  • user avatar
    Adam Argyle
    @argyleink
    Jul 25, 2023
    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 codepen.io/argyleink/pen/…
    Image
    00:00
    469K
  • user avatar
    Adam Argyle
    @argyleink
    Sep 16, 2021
    media-queries-4 making confusing queries much simpler 😍 caniuse (Firefox only atm) caniuse.com/mdn-css_at-rul… CSS spec w3.org/TR/mediaquerie… PostCSS plugin github.com/postcss/postcs… ⭐️ to show Chromium you want it bugs.chromium.org/p/chromium/iss…
    Image
    00:00
  • user avatar
    Adam Argyle
    @argyleink
    Mar 28, 2024
    PREVIOUSLY: separate rulesets for light and dark NOW: one ruleset with `light-dark()`
    Image
    00:00
    Promotional image for the linked to post.
    user avatar
    Bramus
    @bramus
    Mar 27, 2024
    New article got published: CSS `color-scheme`-dependent colors with `light-dark()` 🔗 web.dev/articles/light…
    270K