As system fonts get nicer you might consider treating them like first-class citizens on your web site
Ire Aderinokun writes:
A few months ago, I wrote about how you can use system fonts in the browser using the built-in keywords that work with the font shorthand property (see Using System Fonts in the Browser).
Relatively recently, some websites and web applications have been adopting a new method for using system fonts in the browser. With this method, the fonts used by different systems are explicitly called themselves in the font-family property.
Read more from the source: bitsofcode
How to use @supports in CSS to specify CSS that targets browsers capable of implementing a certain feature
So when do you want to use @supports? A Feature Query is a tool for bundling together CSS declarations so that they’ll run as a group under certain conditions. Use a Feature Query when you want to apply a mix of old and new CSS, but only when the new CSS is supported.
Let’s look at an example using the Initial Letter property. This new property initial-letter tells the browser to make the element in question bigger — like for a drop cap. Here, the first letter of the first word in a paragraph is being told to be the size of four lines of text. Fabulous. Oh, but I would also like to make that letter bold, and put a bit of margin on its right side, and hey, let’s make it a nice orange color. Cool.
We don’t want to change the color of the letter, or add a margin, or make it bold unless it’s also going to be made bigger by the Initial Letter property. We need a way to test and see whether or not the browser understands initial-letter, and only apply the change to color, weight, and margin if it does. Enter the Feature Query.
Read more from the source: hacks.mozilla.org
The better you understand the newest HTML and CSS, you’ll find that much of the code we write can be eliminated altogether
But it turns out the only surefire way to make performant Web Stuff is also to just write less. Minify? Okay. Compress? Well, yeah. Cache? Sounds technical. Flat out refuse to code something or include someone else’s code in the first place? Now you’re talking.
Read more from heydonworks.com
EQCSS, an experiment in extending CSS with Element Queries, a way to apply styles based on element-specific conditions
Read more from the source: Smashing Magazine
WebKit ends its use of prefixes following Microsoft’s decision to make Edge support WebKit prefixes
WebKit’s new feature policy is to implement experimental features unprefixed, behind a runtime flag.
We’ll be evaluating existing features on a case-by-case basis. We expect to significantly reduce the number of prefixed properties supported over time but Web compatibility will require us to keep around prefixed versions of some features.
Read the announcement at WebKit
Get more control of the scroll bar with the proposed CSS scroll snap points feature
Popular UX paradigms for scrollable content frequently employ paging through content, or sectioning into logical divisions. This is especially true for touch interactions where it is quicker and easier for users to quickly pan through a flatly-arranged breadth of content rather than delving into a heirarchical structure through tap navigation. For example, it is easier for a user to view many photos in a photo album by panning through a photo slideshow view rather than tapping on individual photos in an album.
However, given the imprecise nature of scrolling inputs like touch panning and mousewheel scrolling, it is difficult for web developers to guarantee a well-controlled scrolling experience, in particular creating the effect of paging through content. For instance, it is easy for a user to land at an awkward scroll offset which leaves a page partially on-screen when panning.
Read the W3C proposal at: drafts.csswg.org