Tag Archives: Web Standards

Node.js ES6 Support

Come on TC39, V8 and Node have implemented all but the most obscure parts of ES6–where is the standard for import?

 

NodeJS 6.1 passes 96% of ES6 tests, failing only on proper tail calls, iterator closing, and some Proxying of internal `get` calls.

But no standard is in sight for resolving resources based on the string in import statements.

View the compatibility table results at node.green

Can I use, an indispensable developer tool for looking up browser compatibility for various CSS3 and HTML5 features, got a makeover!

caniuse.com gets a new design and fancy filters that are super useful

 

From their blog post:

After a long time of working on the beta.caniuse.com site, I’m happy to finally push everything to the main site. Everything seems to be working pretty well, but if there are any issues, please let me know.

The search seems faster and the tables look nicer. There is a slider to control which browser versions to show based on percent of usage. Plus you can filter usage numbers by geography or import data from your own Google Analytics account. Boom!

Read more from the source: caniuse.com

Responsive Images: Use Cases and Documented Code Snippets to Get You Started

The new <picture> element is a great solution for many responsive image needs; here is a great reference for usage.

 

Andreas Bovens begins by asking four questions:

1. Do my image sizes change depending on my responsive design rules?

2. Do I want to optimize for high-dpi screens?

3. Do I want to serve images with different mime types to browsers that support them?

4. Do I want to serve different art depending on certain contextual factors?

Then he breaks down every permutation and gives code examples for each.

Read more from the source: opera.com

Select styles with CSS only – JS Bin

Styling selects is a dirty business but Todd Parker has some beautiful examples

 

How this works: This styles a native select consistently cross-platform with only minimal CSS. The native select is then styled so it is essentially invisible (no appearance, border, bg) leaving only the select’s text visible. There is a wrapper around the select that has the majority of the button styles (gradient, shadow, border, etc.). We then add the custom arrow via a pseudo element to the right.

Firefox doesn’t allow you to consistently style away the select arrow so we’re setting the select width to 110% and clipping it with overflow:hidden on the parent. We then add extra right padding on the native select so the text won’t run over the custom arrow or be clipped by the wrapper. These style rules are targeted to Firefox with some pretty ugly scoping but it lets better browsers have a cruft-free experience. Older IE and Opera fall back to the native select.

View demo at jsbin.com