Hot in web standards: July/August 2012

Hot in web standards: July/August 2012. Lea Verou earnings from a tiny summer mangle to benefaction a fender emanate of web standards news. This time she covers SVG 2, CSS Masking, Image Values, a Responsive Images Extension and many more

Summer is impending a unavoidable finish and this mainstay has taken a tiny vacation (as many of we have noticed, there was no ‘Hot in web standards’ for July). To redeem ourselves, design some luscious calm in this instalment.

In a dual months given a final article, yours truly assimilated a W3C to work in developer family and web education. In addition, we am now strictly a partial of a CSS WG and a HTML WG so hopefully we will have a some-more sensitive perspective. However, any opinions we demonstrate in these articles are personal and do not indispensably paint W3C.

The CSS Working Group had a third face to face (F2F) assembly for this year in San Diego, CA on 13-15 August. F2F meetings are fundamentally a few days filled with mixed hour-long meetings between a many active members of a Working Group. Every assembly has a certain subject (for example: CSS Variables) and customarily many resolutions are done over a course. Not all of these decisions are engaging for authors, given they mostly regard dilemma cases that usually few people will ever encounter. However, a poignant commission of them are, so this month’s ‘Hot in web standards’ will be some-more CSS-heavy than usual.

The finish of -prefix-ing?

We’re all informed with a problems that prefixes entail. Most of us see a advantages they offer, though they still worry us when we have to repeat a stipulation 5 times to get a outcome we want. The initial facilities process was one of a topics discussed in a F2F. While no grave fortitude was made, a accord in a organisation was to adopt a new policy, due by David Baron and fantasai of Mozilla.

The new policy, in a nutshell:

  • Ship initial facilities unprefixed though only in beta and nightly builds of browsers. Once 3 browsers exercise a same feature, and it works in roughly a same way, all 3 of them are authorised to boat it in a fast build, so that developers can start regulating it in production.
  • When that happens, both prefixed and unprefixed versions of a underline will be supported. This will capacitate we to make adjustments for specific browsers if we learn an disfavour (after we news it of course). This partial of a process is still underneath debate.
  • If a browser breaks a manners and releases initial facilities in fast builds, other browsers can follow, as prolonged as it’s not a totally terrible idea.

If we are meddlesome in a nitty-gritty, we can review a minute process and a whole contention in a minutes.

First Public Working Draft (FPWD) of SVG 2

The prior chronicle of SVG, SVG 1.1 was final updated in 2011. Since then, a SVG WG was tough during work, fleshing out a subsequent vital chronicle of a language: SVG 2. On 28 August, a efforts were mature adequate to be published in a earnest open Working Draft of SVG 2. For anyone following a swell on SVG, this is large news. SVG 2 adds new facilities and solves many of a issues that SVG 1.1 suffered from. Not all designed changes are already in a SVG 2 draft. Many of them will be combined in a future, as their sum turn some-more concrete.

New breeze from Adobe: CSS Masking

Following a newfound tradition of bringing Photoshop-style effects to CSS with a simplified syntax over their SVG counterpart, Adobe put brazen a CSS Masking proposal. The breeze attempts to not usually move SVG masks to HTML content, though also yield a simplified syntax for them that doesn’t engage SVG markup during all. This simplified syntax is heavily formed on a exclusive -webkit-mask shorthand.

New draft: Intrinsic Sizing

The inclusive duo, Tab Atkins and fantasai published nonetheless another draft: CSS Intrinsic Extrinsic Sizing Module. If we are wondering what these terms mean, here’s a gist:

Intrinsic size: The distance an component has formed on a possess essence and not any surroundings. For instance PNG images have a certain breadth and height, that is their unique size. On a other hand, SVG images can have an unique distance (if both breadth and tallness are specified), an unique ratio or no unique measure during all.

Extrinsic size: The distance that an element’s vicinity force on it (context-based). For example, an unstyled divide with no set measure will get a breadth of all a accessible space a primogenitor provides: This is foreign sizing.

This new breeze adds some flattering cold facilities that solve really common use cases. To name a few:

  • Remember a nauseous hacks to enclose floats? In a few years, we can giveaway adult a space they occupy in your brain. In a destiny it will be as elementary as min-height: contain-floats
  • Remember those times when we wanted to give something a height: 100% though it didn’t work as expected? Soon you’ll be means to use things like height: fill-available
  • Remember when we inline-blocked, floated or positively positioned an component usually to get it to automatically adjust a breadth formed on a content? Soon you’ll be means to have your cake and eat it too, with width: fit-content

Work starting on Image Values 4

Remember linear-gradient(), radial-gradient() and co? Cutting dilemma stuff, right? Um, not quite. They go to Image Values 3, that is in CR and sincerely mature by now. The new child on a retard is Image Values 4, still usually an Editor’s Draft (ED).

Image Values is one of my favourite CSS modules, given it’s really visual. Level 4 adds some really sparkling new stuff:

  • Conical gradients. I’ve been wishing for conical gradients ever given we initial used a CSS gradient. They capacitate so many effects we now need SVG files for. we even wrote a offer for them in 2011, that this breeze is formed on.
  • cross-fade() which will capacitate we to brew and mix opposite images. For example, cross-fade(50% url(foo.png), url(bar.png)) is midst between a dual images, both in measure and in a tangible pixels.Fun fact: this duty was initial specified in Image Values 3, though was deferred to Level 4 overdue to a miss of implementations. Ironically, shortly after that, WebKit implemented an initial chronicle of cross-fade(). we done an instance of an animation that takes advantage of cross-fade so we can see it in action. Notice how there is no cross-fade() call in a CSS code. It’s used by a browser behind a scenes, to paint a middle values between a dual images.
Hot in web standards: July/August 2012

New proposal: Cascading Attribute Sheets (CAS) — Like CSS, though for attributes!

Tab Atkins recently done a confidant offer to a WebApps WG: An whole new language, nonetheless formed in existent ones. The syntax of CAS is accurately a same as CSS, though instead of environment CSS properties, it configures HTML attributes. To make implementations easier and faster, a attributes are practical when a component is combined on a page and not dynamically. This boundary this language’s usefulness, though it’s still a lot easier than a JavaScript equivalent.

New proposal: Responsive Images Extension

If you’ve been following a news on HTML5 (or this column), we might remember a misunderstanding on manageable images. Recently, Microsoft’s Adrian Bateman and Responsive Images CG personality Mat Marquis co-authored a offer for a Responsive Images Extension. It attempts to mix both prevalent proposals (picture component and srcset attribute) into one spec.

Some online media publicised this story with headlines such as ‘W3C Publishes First Draft of HTML Responsive Images Extension’. However, this is false on a series of opposite levels. Editor Drafts (EDs) are not indispensably permitted by W3C. Any WG member can post an ED about anything. EDs are fundamentally proposals, not specifications or drafts. The existence of an ED does not indicate publicity by possibly W3C or even a Working Group it belongs to.

New Adobe proposal: mixed pseudo-elements

If you’ve been gripping a observant eye on ways to minimise coupling elements in your HTML, you’ve certainly taken notice of all a crazy things we can do by utilizing a ::before and ::after pseudo-elements. If you’ve also used those techniques in practice, you’ve substantially faced their limitations: We can't mix multiples of them, given we usually have dual pseudo-elements we can use.

This problem was creatively tackled as early as 2003, in a CSS3 Generated and Replaced Content Module. However, a breeze was deserted and nobody implemented it, so it was lost in a dry dilemma of Adobe recently started efforts to revive a thought of mixed ::before/::after pseudo-elements with a new proposal.

The offer was discussed extensively in a San Diego F2F. A few concerns were raised, that we can review in that meeting’s minutes. The welfare was to work on a some-more petrify proposal, though there is no accord nonetheless about either mixed ::before and ::after pseudos is a fascinating feature.

Fresh in Selectors 4: drag-and-drop pseudo-classes

The village mostly requested CSS pseudo-classes to make operative with a drag and dump API easier. Three new pseudo-classes were recently combined in Selectors 4 to promote that use case:

  • :active-drop-target
  • :valid-drop-target
  • :invalid-drop-target

Admittedly a names are flattering prolix and a CSS WG is looking for shorter alternatives. Your assistance can be useful here: Review a probable options and respond to a mailing list indicating your preference, ideally explaining since we consider so. If we consider we have any improved names to suggest, that would be acquire too!

Values and Units goes to CR

Values and Units defines that information forms (such as image, urlor number) and units (eg px, em, or cm) CSS supports. Admittedly, many authors aren’t vehement by this spec. This is unfortunate, given it includes some flattering damn cold new functionality: Viewport-relative lengths, a rem territory that behaves like em though always refers to the html element’s rise distance and a ch component that is relations to a rise width, to name a few.

Values and Units has been flattering fast for a while, so it’s good to see a standing strictly allege to simulate that.

How many classes can overrule an ID?

This was a doubt that Chris Coyier set out to answer a few weeks ago. The answer was 256, in many browsers. Consistently, 256 tab selectors can overrule a class. Of course, if you’ve ever consulted a spec on specificity, we know this is improper behaviour. No series of classes should be means to overrule an id and no series of tags should be means to overrule a class. This smirch in browsers is caused by a elementary reason: The series of IDs, classes and tags is stored in 8-bit ‘slices’ of a same 32bit number. However, 8-bit integers usually go adult to 255. Once they turn 256, they crawl into a subsequent 8-bit ‘slice’. If that still seems unclear, Ryan Seddon wrote about it in some-more detail.

The CSS WG discussed a emanate and several ideas of what should happen: should a territory be altered in Selectors4 to be easier to implement? So far, a fortitude seems to be that depends over a certain series will be clipped to that number. With that in effect, 256 classes would be treated like 255 classes. Same with one million, 6 trillion or one gazillion classes.

W3Conf 2012 in November

W3C is tough during work with formulation this year’s W3Conf, that will be W3C’s second discussion targeted to web developers and designers. It will take place in a Bay Area (aka Silicon Valley) someday in midst or late Nov and will be mostly focused on how to take advantage of web standards today, rather than what’s entrance in a future. If we consider that sounds interesting, keep an eye on it!

W3Conf 2012 in November

Thanks to fantasai, Tab Atkins and David Baron for their profitable feedback

VN:F [1.9.22_1171]
Rating: 10.0/10 (1 opinion cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)
Hot in web standards: July/August 2012, 10.0 out of 10 formed on 1 rating

Leave a Comment

Comments are moderated. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

5 × nine =