Building the web you build on @GoogleChrome ✨🎨 Web Experience DevRel Lead 🦄 @csswg + @openuicg. #CSSPodcast host 🎬 una.im
Brooklyn, NY
- Tweets 31,151
- Following 1,444
- Followers 88,022
- Likes 42,222
🎉 Aspect Ratio just landed in Chrome Canary! 🎉
➡️Check it out by enabling the experimental web platform features flag in version 84.0.4145.0 or later
👋🏽 Say your goodbyes to 56.25% and let me know if you find any bugs! 🐞
ALT old: `padding-top: 56.25%` new: `aspect-ratio: 16 / 9`
66
1,205
4,655
This made my night
![Me: *makes. a small change to the CSS*
My website: [image of face with eyeballs on glasses, lower than the nose]](/pic/orig/media%2FEjsJgWgX0AArZwv.png)
ALT Me: *makes. a small change to the CSS* My website: [image of face with eyeballs on glasses, lower than the nose]
42
549
3,725
Have you seen the new flexbox debugging features in Chrome DevTools?!
Prettttyyy darn cool
developer.chrome.com/blog/ne…
50
604
2,963
`accent-color` is now supported in all modern browsers 🎉🎨
One line of code enables you to style previously-hard-to-access form controls like checkboxes and radio buttons
body {
accent-color: hotpink;
}
Works really nicely with the `color-scheme` property too!
22
537
2,657
Hello, you’ve been blessed with a good week by this happy puppo 🙏🐶 pass it on
ALT Dog sitting with tongue out and head tilted
14
299
2,522
Yall. This is so cool!!!
The text reflected in the raindrops with a shader 🤯
Real, searchable, translatable DOM content in the canvas. Stylable with regular CSS, too. 🤯🤯🤯
@fserb
For the last couple months, our team has been working hard on a few paradigm-changing features for HTML Canvas.
One of them is the ability to have HTML elements in a canvas.
Here's a ThreeJS demo with a live HTML texture.
40
236
2,385
331,850
I’ve been working on a little side project this year 👀
:first-child launching next month 🥰
Very excited for this new life chapter 🧡🌈🍂
ALT 8 months pregnant
ALT Polaroids
153
10
2,432
147,613
Hello! I made a little helper website for using CSS Grid in a progressively enhanced way 🤗
✨ gridtoflex.com ✨
It showcases examples of layouts/components that use CSS grid and how to get them working in IE/Edge too!
41
550
2,148
🌈 I'm back from vacation & have some news! 🌿
Today I'm joining the @googlechrome team as a Dev Advocate focused on CSS (and Web UI) best practices / new technologies!
I've officially managed to turn my side project into my day job 😱
I can't wait to learn from my new team!
98
38
2,135
"Break out" of a parent's containing width to take the full screen of a page w/this nice utility class:
```
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
```
41
300
2,078
Thanks for all the great questions during #webdevLIVE 😁
➡️ Check out 1linelayouts.glitch.me (built for this talk!)
for some modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of code can be!
Video is coming soon 📽️
23
470
1,910
No-JS hamburger menu w/the popover API:
Browser handles:
- clicks on hamburger & close btns
- esc key to exit
- tab nav
- spacebar + enter key toggle (open & close)
- light dismiss (click away) close
How:
<btn popovertarget="menu">..</>
<div popover role="menu" id="menu">..</>
59
295
1,908
379,678
A great way to learn a concept is to write a blog post about it
✍️ Remember taking notes in school?
It's like that, but more polished, organized, & filled with links + your own definitions (which helps you think it through)
Blogging = public notes u can reference & share 😎
40
429
1,739
🤔 Did you know: min() max() and clamp() let you inject logic into your CSS!
🎉 And the support is pretty darn good, too! (All modern browsers have full support w/the Safari tech preview update)
📊 Support: caniuse.com/#feat=css-math-f…
👩🏻💻 Gist: gist.github.com/una/07af675b…
ALT 3 examples in a text editor, see the link to get the code!
26
354
1,694
🆕 Quick HTML Tip: Now you can add horizontal rules between options in select elements
🚀 Support: Chrome 119 & Safari 17
developer.chrome.com/blog/hr…
ALT Before and after in Chrome 119 for select elements with horizontal rules
26
232
1,550
203,563
5 years ago, I was flown out to interview at Slack, and was told that the code I wrote for the take-home test was "too modern" (like, arrow functions)
I quote: "...we don't use modern JavaScript here"
The experience was fine, but the reason for the rejection just felt odd.
68
82
1,481
🚨 Add a custom color to your forms in 1 line of CSS: INTRODUCING the accent-color property!!
`accent-color: pink`= pink checkboxes, radio buttons, sliders, etc.
Landing in:
Chromium 93 (Aug 31)
Firefox 92 (Sept 7)
Read:
web.dev/accent-color/
Try it:
accent-color.glitch.me/
ALT All of the colors and swap of colors
ALT Accent-color demo
16
359
1,485
For what it’s worth, I’m *super* happy to rename the default branch structure of “master” to “main” and I hope we can all do this together as a community with @github leading the charge by implementing in their product moving forward 🙂
311
241
1,419
#lintHTMLwithCSS:
/* Headers out of order (i.e. h2 before h1, etc.)
Result: dotted blue outline
*/
h2 ~ h1,
h3 ~ h1,
h4 ~ h1,
h5 ~ h1,
h6 ~ h1,
h3 ~ h2,
h4 ~ h2,
h5 ~ h2,
h6 ~ h2,
h4 ~ h3,
h5 ~ h3,
h6 ~ h3,
h5 ~ h4,
h6 ~ h4,
h6 ~ h5 {
outline: 2px dotted blue;
}
ALT Code snippet (also in the tweet)
ALT Showcasing what that would look like with the headers
35
236
1,381
I was today years old when I learned that:
TIL CSS "background-repeat: round" bit.ly/bgroundtips ~ repeats background images without clipping ✂️
20
164
1,414
Super simple scroll-driven progressive enhancement: animate in your images 🩷
@keyframes appear {
from { opacity: 0; scale: 0.8; }
to { opacity: 1; scale: 1; }
}
img {
animation: appear linear both;
animation-timeline: view();
animation-range: entry 25% cover 50%;
}
14
148
1,418
121,916
Introducing 🤯 flex-wrap: balance 🤯
Would you use this?
⚠️ Not a "real" feature yet, just something one of our engineers has been working on.
(You can try it out in the latest Chrome Canary with the experimental web platform features flag though!)
74
117
1,469
70,961
On the last day of the decade I woke up engaged to my roommate, dog dad, and favorite human ❤️💍
It was a complete surprise and I’m so excited to spend the coming year and every year after that with him 🤗
Happy New Years y’all! Wishing you all the best in 2020
ALT Us together with the ring
ALT Bling bling on disco
112
6
1,301
🥳 CSS functions have arrived!!! 🥳
And they are *AWESOME*
Now, you can do things like this:
@function --alpha(--color, --opacity) {
result: rgb(from var(--color) r g b / var(--opacity));
}
div {
background: --alpha(red, 80%);
}
(*arrived = in the latest stable Chrome)
60
167
1,388
164,891
If you haven't checked out web.dev Patterns yet, DO! It's really useful!
web.dev/patterns
8
208
1,176
I am unbelievably excited to share this with y’all!!! 🎉🐶🎉👩🏻💻🎉
Double, double toil and trouble. Say goodbye to all your web design struggle 🎃🌕👻
Introducing Designing in the Browser, a hauntingly good new series about designing beautiful interfaces with best practices in mind.
Stay tuned for the launch on Nov 7. Ruff! 🐶
32
128
1,145
Omg dead 😂
"There are only 2 hard things in computer science:
- Naming things
- Vertically centering things"
-@DavidKPiano #CSSconfEU
ALT David with this slide described at CSS Conf
21
563
1,114
🔥 `content-visibility` is landing in Chromium 85!
This CSS prop gives you some serious perf gains by skipping layout, style, and paint until needed!
✨ the auto value does this automatically
A demo we tested had initial render drop from 232 to 30ms!😱
web.dev/content-visibility/
ALT In our article demo, applying content-visibility: auto to chunked content areas gives a 7x rendering performance boost on initial load.
19
285
1,078
:has() + container queries = the component-based logical styling we've always dreamed of 😍
In this demo:
🖼 If the card has an image: make the font smaller & at < 400px wide, stack it
✨ If no image: bigger font, no stacking
codepen.io/una/pen/oNpoqGp
⚠️ Need flags on in Canary
21
159
1,071
Two of the best humans in tech I know got married today!!! Congrats @sarah_edo and @dizzyd 💕👰🏼🤵🏻🎊
ALT Sarah and dizzy
31
58
989
Good news y’all! In a world of fake women-in-tech grifters, fortunately I’m a real person who’s been putting out real (free) tech content, running meetups, & speaking at conferences since 2013!
Follow me for CSS, UI, performance and more 🥳
(& occasional photos of my dog 🐶)
ALT Making a designing in the browser video
ALT Frolicking in the Brooklyn botanic garden
ALT At the last conference I was a part of — dotCSS in Paris
23
44
977
How does Chrome render pixels on the screen?
Learn all about RenderingNG from @chrishtr:
developer.chrome.com/blog/re…
ALT Illustration to pixels on screen
11
238
1,006
You can learn anything, but you can't learn everything 🙃
So accept that, and focus on what matters to you
15
347
935
We're getting close to finalizing an API to enable a customizable native select element!
🥳 Now it's in stage 2 in the WHATWG & we'd love to hear your thoughts.
This post details how to use it, new elements and parts, and what you can do today 🔮
developer.chrome.com/blog/rf…
ALT diagram showing parts oft he customizable select
30
161
985
84,062
Don't forget to link your labels to your checkboxes and radio inputs!
codepen.io/una/pen/LYxvbqb
20
123
938
Its 2017. Design & engineering are incredibly intertwined, but companies still don't really know what to do with hybrid skillsets 😐🤔
47
288
903
Wow it seems like everyone's leaving their jobs and starting new roles! I have some personal news too.
Tomorrow, it will be my last day at Google.
Until Monday, I'll be back Monday. Just taking a lil weekend vacation 🙂
I'll miss my team & I'm excited for this new adventure 😂
40
12
916
To do this with the (upcoming) interest invoker API, it's 1 line of code:
.parent:has(:interest-source) button {
interest-show-delay: 0s;
}
You have your default delay. Then, you update the interest delay when an element inside of the parent has interest (i.e. hover).
Tooltips tip:
Tooltips should have a delay before appearing to prevent accidental activation. Once a tooltip is open, hovering over other tooltips should open them with no delay and no animation.
This feels faster without defeating the purpose of the initial delay.
8
53
963
93,515
It's weird how working from home has become the place to be productive, and going into the office is for social hour
14
102
843
😱 I just realized I forgot to tweet my favorite photos from Noogler week!
ALT Me on a Google bike in front of the Google building in Mountain View
ALT Me wearing a noogler hat
19
19
861
🚨 An experimental flag for container queries (@container) just hit Chrome Canary!
Yes, seriously!
Go to: chrome://flags in your URL bar and turn on enable-container-queries to try it out.
Here's a demo to help you see how they work (w/flag in Canary): codepen.io/una/pen/LYbvKpK
18
229
835
🤯 Did you know that you can type `doc.new` or `sheets.new` in your URL bar and it makes a new google doc/sheet/form/etc!?!?!?!?!?!! 🤯
Introducing a ✨ .new ✨ time-saving trick for users. Type any of these .new domains to instantly create Docs, Sheets, Slides, Sites or Forms ↓
20
268
834
✨🎉✨Introducing CSSGram: ✨🎉✨
A tiny (<1kb gzipped!) CSS library for Instagram filters.
una.im/CSSgram/ nitter.app/Una/status/65839099122…
22
481
826
TIL: Just like you can copy an SVG from Illustrator into a text file, you can copy an SVG from a text file and paste it into Illustrator 🤯
10
180
785
Saving you a click:
- Last week sucked for me.
- Sorry I’m not sorry
- Good luck if you left
- Thank you if you stayed
- Customers, please don’t drop us
- This will blow over
world.hey.com/jason/an-updat…
10
49
735
You won’t need to use display grid/flex for align-content anymore 🙂
That means you can be more intentional with the layout algorithm and avoid unintended side effects when you just want this centering feature
Vertical centering used to be one of the biggest CSS layout headaches, but now the display: block element can be vertically centered by align-content: center.
Which has been implemented in Chrome Canary and WebKit Nightly. Thanks @fantasai and tkent. github.com/WebKit/WebKit/pul…
15
101
734
89,897
I used to write "Convert your CSS codebase into Sass!" guides
Now I think it's time for a "Convert your Sass codebase into vanilla CSS!" guide
36
43
752
🎉 Today my team is launching Learn CSS!
A free course that guides you through CSS fundamentals + some advanced techniques
Use the modules as reference or go through the entire set in order, w/demos, diagrams, and check-ins to test your comprehension 😎
web.dev/learnCSS
⭐ Want to level up your web styling expertise?
This course breaks down the fundamentals of CSS into digestible, easy to understand pieces. Learn the Core aspects of CSS and how to use them.
Get started → goo.gle/3hz3eKj
11
180
747
View transitions are in every browser now ✨
firefox.com/en-US/firefox/14…
19
74
806
81,534
Responsive card > Responsive button > Responsive icon
Container queries are the future y'all.
SO dope to work with.
Demo requires Canary + Container Queries flag
Uses:
- Newer `container: inline-size` syntax
- Named containers to query diff parents
codepen.io/una/pen/NWgxXGV
18
117
748
Some professional news 🙂
Friday was my last day as a Senior DevRel Eng at Google
This week I’m a Staff DevRel Eng at Google 😎
Very excited about what we’ve been able to achieve for UI devs on the web platform so far & what’s to come!!
Pic of Disco & I celebrating our promos
ALT Disco and i on a picnic blanket in prospect park
68
1
736
TIL: you don’t have to encode an SVG to use it as a data uri — you can use readable SVGs!
@LeaVerou #FrontendUnited
12
127
718
Thought you couldn't apply color functions in vanilla CSS?
✨ THINK AGAIN! ✨
❌ No Preprocessors
❌ No PostProcessors
❌ No JS
✅ calc() and CSS Variables!
➡️ Here's an example of mix(): codepen.io/una/pen/qzKXgr
See my previous tweets for more color functions!
12
154
704
More than ever, I'm getting emails like "I've been a React dev for 5 years, now how do I learn CSS?"
& I'm realizing that as the prevalence of JS frameworks is on the rise, the need to learn basic CSS is on the rise, too.
48
81
698
FINALLY!!!! The gap property is in Chrome Canary 🙏
I've been waiting for this day for ages.
So many layout woes will be resolved 🎇
🎉 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
13
103
710
Anyone have a beginner JavaScript course you really like and would recommend to someone with 0 coding experience?
178
85
697
I'm joining @Google as a Developer Advocate for @materialdesign in April! ✨
Really looking forward to working with the team 🤗
Wrote some words here: una.im/joining-google/
98
17
675
Did you catch that the dialog element became stable in all modern browser engines this month? 🎉
Here's a quick walkthrough video & demo to play with:
codepen.io/una/pen/dyJRwvG
Webkit blog: webkit.org/blog/12209/introd…
MDN docs:
developer.mozilla.org/en-US/…
16
137
680
✨ hr in select is now in all major desktop browsers*✨
*(not yet on mobile)
Learn more:
developer.chrome.com/blog/hr…
ALT Using hr in select
9
80
694
44,620
🚨
This is the named CSS color "hotpink" in Chrome (left) vs. Firefox (right)
Why so different!?
ALT much paler color on chrome and more vivid color on firefox
63
125
669
Hey y'all, check out my new NFT project: JSNFT
We're minting all native JavaScript functions, & anytime someone uses the function you own, they have to pay you royalties.
Yes yes, totally reasonable NFT project.
Nobody is allowed to use querySelector() now without paying me.
53
54
631
Smooth list morphing with view transitions 😎
I'm a convert 💯
codepen.io/web-dot-dev/pen/q…
15
85
667
86,905
CSS Cascade layers are coming to Chromium 99 (currently in Canary) & Firefox 97 (currently in Nightly)
So what are they & how do you use them? 👀
I made a quick video to show you:
piped.video/ilrPpSQJb3U
ALT Screenshot of my video because it won't autoplay on here for some reason
21
128
652
✨🚀 Just finished up the gradient folders! 🎉✨
una.im/gradient-folders/
✨🌈 Inject more color in your life (& desktop) 😎✨
ALT Gradient folders on desktop
ALT Gradient folders local
36
117
633
