OR 

Sass Selector Combining

Brad Frost was asking about this the other day... Sass people, which way do you do it and why? pic.twitter.com/dIBA9BIuCO Brad Frost (@brad_frost) October 1, 2018 .c-btn { __icon { ... } } I guess that‘s technically "nesting" but the selectors come out flat: .c-button__icon { } The question was whether you do that or just write out the whole selector instead, as you would with vanilla CSS. Brad‘s post gets into all t

favicon of http://css-tricks.com

HTML for Zip Codes

I just overheard this discussion on Twitter, kicked off by Dave. Me (coding a form): input id=zip type=numberTiny Devil (appears on shoulder): Yaaas! I love the optimism, ship it!Me: Wait, why are you here? Is this going to blow up on me? What do you know that I dont? Dave SPOOPert (@davatron5000) October 9, 2018 It seems like zip codes are just numbers, right? So... input id="zip" name="zip" type="number" The advantage there being able to take

favicon of http://css-tricks.com

Using Event Bus to Share Props Between Vue Components

By default, communication between Vue components happen with the use of props. Props are properties that are passed from a parent component to a child component. For example, here‘s a component where title is a prop: blog-post title="My journey with Vue"/blog-post Props are always passed from the parent component to the child component. As your application increases in complexity, you slowly hit what is called prop drilling here‘s a r

favicon of http://css-tricks.com

Lazy Loading Images with Vue.js Directives and Intersection Observer

When I think about web performance, the first thing that comes to my mind is how images are generally the last elements that appear on a page. Today, images can be a major issue when it comes to performance, which is unfortunate since the speed a website loads has a direct impact on users successfully doing what they came to the page to do (think conversation rates). Very recently, Rahul Nanwani wrote up an extensive guide on lazy loading images

favicon of http://css-tricks.com

Unbuttoning Buttons

We dug into overriding default buttons styles not long ago here on CSS-Tricks. With garden-variety fully cross-browser-supported styles, you‘re looking at 6-10 CSS rules to tear down anything you need to off a button and then put in place your own styles. Hardly a big deal if you ask me, especially since it‘s extremely likely you‘ll be styling buttons anyway. Scott O‘Hara has taken a look as well. I think the solution offe

favicon of http://css-tricks.com

What are Durable Functions?

Oh no! Not more jargon! What exactly does the term Durable Functions mean? Durable functions have to do with Serverless architectures. It‘s an extension of Azure Functions that allow you to write stateful executions in a serverless environment. Think of it this way. There are a few big benefits that people tend to focus on when they talk about Serverless Functions: They‘re cheap They scale with your needs (not necessarily, but that&l

favicon of http://css-tricks.com

The Way We Talk About CSS

There‘s a ton of very quotable stuff from Rachel Andrew‘s latest post all about CSS and how we talk about it in the community: CSS has been seen as this fragile language that we stumble around, trying things out and seeing what works. In particular for layout, rather than using the system as specified, we have so often exploited things about the language in order to achieve far more complex layouts than it was ever designed for. We ha

favicon of http://css-tricks.com

POSTing an Indeterminate Checkbox Value

There is a such thing as an indeterminate checkbox value. It‘s a checkbox (input type="checkbox") that isn‘t checked. Nor is it not checked. It‘s indeterminate. We can even select a checkbox in that state and style it with CSS! Some curious points though: It‘s only possible to set via JavaScript. There is no HTML attribute or value for it. It doesn‘t POST (or GET or whatever else) or have a value. It‘s like be

favicon of http://css-tricks.com

Styling the Gutenberg Columns Block

WordPress 5.0 is quickly approaching, and the new Gutenberg editor is coming with it. There‘s been a lot of discussion in the WordPress community over what exactly that means for users, designers, and developers. And while Gutenberg is sure to improve the writing experience, it can cause a bit of a headache for developers who now need to ensure their plugins and themes are updated and compatible. One of the clearest ways you can make sure

favicon of http://css-tricks.com

Material Design Animation Guides

I‘ve seen two guides posted to Medium about animation in the last month that have seriously blown up! Taras Skytskyi‘s The ultimate guide to proper use of animation in UX Jonas Naimark‘s Motion design doesn‘t have to be hard There is a lot to learn in each one! The demonstration animations they use are wonderfully well done and each guide demonstrates an interesting and effective animation technique, often paired next t

favicon of http://css-tricks.com

Deliver exceptional customer experiences in your product

(This is a sponsored post.) Pendo is a product cloud that helps create lovable products that customers can‘t live without. Pendo enables product teams to understand product usage, collect user feedback, measure NPS, assist users in their apps and promote new features in product all without requiring any engineering resources. This unique combination of capabilities is all built on a common infrastructure of product data and results in bett

favicon of http://css-tricks.com

Quick Tip: Debug iOS Safari on a true local emulator (or your actual iPhone/iPad)

We‘ve been able to do this for years, largely for free (ignoring the costs of the computer and devices), but I‘m not sure as many people know about it as they should. TL;DR: XCode comes with a "Simulator" program you can pop open to test in virtual iOS devices. If you then open Safari‘s Develop/Debug menu, you can use its DevTools to inspect right there also true if you plug in your real iOS device. Direct Link to Article The

favicon of http://css-tricks.com

Valid CSS Content

There is a content property in CSS that‘s made to use in tandem with the ::before and ::after pseudo elements. It injects content into the element. Here‘s an example: div data-done="#x2705;" class="email" chriscoyier@gmail.com /div .email::before { content: attr(data-done) " Email: "; /* This gets inserted before the email address */ } The property generally takes anything you drop in there. However, there are some invalid v

favicon of http://css-tricks.com

The dialog element

Chris Manning digs into diaglog: A dialog element provides: An element that is easy to show and hide, including an open boolean attribute on the element itself. Two versions: astandard popover or modal version. A ::backdrop pseudo-element for modal types. Built-in focus: see dialog focusing steps. ARIA role support (dialog is the implied default). Also accepts the alertdialog role. A pending stack for multiple dialogs. A DOM interface with the

favicon of http://css-tricks.com

One Invalid Pseudo Selector Equals an Entire Ignored Selector

Perhaps you know this one: if any part of a selector is invalid, it invalidates the whole selector. For example: div, span::butt { background: red; } Even though div is a perfectly valid selector, span:butt is not, thus the entire selector is invalidated neither divs nor span::butt elements on the page will have a red background. Normally that‘s not a terribly huge problem. It may even be even useful, depending on the situation. But the

favicon of http://css-tricks.com