(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.data-privacy-src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-1596564-1', 'auto'); ga('send', 'pageview');
Home » NewsBlog » CSS

What do you name color variables?

2018-12-08T03:04:47+00:00December 8th, 2018|Categories: News, Tutorials|Tags: |

What naming scheme do you use for color variables? Have you succeeded at writing CSS that uses color variables in a manner agnostic to the colors they represent?I've tried all of the following, and I have yet to succeed at writing CSS that works well with any color scheme. ☹️ — Lea Verou (@LeaVerou) October [...]

Accessible SVG Icons With Inline Sprites

2018-12-08T03:04:46+00:00December 8th, 2018|Categories: News, Tutorials|Tags: |

This is a great look at accessible SVG markup patterns by Marco Hengstenberg. Here's the ideal example: Menu Notes: It's not the itself that is interactive — it's wrapped in a for that. The .svg-icon class has some nice trickery, like em-based sizing to match the size of the text it's next to, and currentColor [...]

Compound Components in React Using the Context API

2018-12-07T03:06:02+00:00December 7th, 2018|Categories: News, Tutorials|Tags: |

Compound components in React allow you to create components with some form of connected state that’s managed amongst themselves. A good example is the Form component in Semantic UI React. To see how we can implement compound components in a real-life React application, we’ll build a compound (multi-part) form for login and sign up. The [...]

Edge’s Announcements

2018-12-07T03:06:01+00:00December 7th, 2018|Categories: News, Tutorials|Tags: |

The public-consumption blog post: Ultimately, we want to make the web experience better for many different audiences. People using Microsoft Edge (and potentially other browsers) will experience improved compatibility with all web sites, while getting the best-possible battery life and hardware integration on all kinds of Windows devices. Web developers will have a less-fragmented web [...]

Browser Diversity Commentary, Regarding the Edge News

2018-12-07T03:06:00+00:00December 7th, 2018|Categories: News, Tutorials|Tags: |

Still no word from the horse's mouth about the reported EdgeHTML demise, but I hear that's coming later today. The blog posts are starting to roll in about the possible impact of this though. Andre Garzia: While we Blink, we loose the Web: Even though Opera, Beaker and Brave are all doing very good work, [...]

CSS Selectors are Conditional Statements

2018-12-07T03:05:27+00:00December 7th, 2018|Categories: News, Tutorials|Tags: |

.foo { } Programmatically, is: if (element has a class name of "foo") { } Descendent selectors are && logic and commas are ||. It just gets more complicated from there, with things like combinators and pseudo selectors. Just look at all the ways styles can cascade. Jeremy Keith: If you find you can’t select [...]

The Software We Pay For

2018-12-06T03:06:22+00:00December 6th, 2018|Categories: News, Tutorials|Tags: |

We did a Web Developer Economics series a few years ago, where we looked at the various costs of being a web developer: Web Developer Economics: One-Off Software Costs Web Developer Economics: Hardware Costs Web Developer Economics: Monthly Service Costs Web Developer Economics: The Wrapup I'm sure some of that software and hardware has changed [...]

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Ok