Now that we have most of the basics of HTML and CSS in the browser, we’ve begun implementing new features that I would consider “quality of life” improvements, many of which have been inspired by mobile. One great example is the CSS prefers-color-scheme media query, which allows developers to cater their design to system theme (dark or light) preference:
/* Light mode */ @media (prefers-color-scheme: light) { html { background: white; color: black; } } /* Dark mode */ @media (prefers-color-scheme: dark) { html { background: black; color: white; } }
While watching my Twitter feed fly by, I saw an awesome trick from Flavio Copes:
<picture> <source srcset="dark-logo.png" media="(prefers-color-scheme: dark)"> <img src="http://davidwalsh.name/logo.png" /> </picture>
By applying the media query to the source, you can define the image to load. This technique is obviously valuable when you need to load a new source image and not simply change a CSS property.
Maybe not the most maintainable code but very clever nonetheless!
Create a CSS Cube
CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you’ve got something really neat. Unfortunately each CSS cube tutorial I’ve read is a bit…
Designing for Simplicity
Before we get started, it’s worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech…
Facebook Sliders With Mootools and CSS
One of the great parts of being a developer that uses Facebook is that I can get some great ideas for progressive website enhancement. Facebook incorporates many advanced JavaScript and AJAX features: photo loads by left and right arrow, dropdown menus, modal windows, and…
MooTools Star Ratings with MooStarRating
I’ve said it over and over but I’ll say it again: JavaScript’s main role in web applications is to enhance otherwise boring, static functionality provided by the browser. One perfect example of this is the Javascript/AJAX-powered star rating systems that have become popular over the…