Browser standards and new practices for CSS to come #html5defcon

After the end of day 1 at the inaugral HTML5 Developer Conference of Kerala in the lively campus of XIME near Kalamasseri, I thought the session by Shwetank Dixit ( a Developer Evangelist atOpera, and a member of theW3C Mobile Web for Social Development Group and the W3C Web Education Community Group) on future of web was fantastic where he discussed some of the browser standards and good pracitices in CSS to come in 2014 and some maybe after 2014.

Here is a quick recap.

So what are some of those new standards popular browsers are working on in CSS4 ?

1):matches (),a new pseudo-class that would allow for matching styles to certain elements. Just use the :matches( ) class to group a list of selectors together, and voila! you have one line of code grouping items for matching.
article:matches(.active, .visible) {
background: green;
}

2):local-link,a new pseudo class which styles hyperlinks, depending on the website visitor’s location on the site. This pseudo-class also can differentiate between internal and external links. In non-functional use,:local-linkrefers to an element that has a source anchor hyperlink whose target is the same as the element’s document URL. In functional use, :local-link can be in a hierarchical scheme as follows:
:local-link(0)– refers to a link with a target within the same domain
:local-link(1):local-link(2)– refers to a link whose target is the same origin and first and second path segments
And so on and so forth …

3)Time-dimensional pseudo-classes:past,:current,:future
The time-dimensional pseudo-classes allow for classification of elements within certain timeframes of, say, a speech rendering of a document or a video. The:currentpseudo-class is for the element or its ancestor that is active at the moment. For instance, a paragraph being read aloud would be highlighted with the following:
:current(p, li, dt, dd) {
background: yellow;
}
The:pastpseudo-class refers to an element specified to happen before a:currentelement. A:futurepseudo-class then, of course, refers to an element defined to occur after a:currentelement.

4):user-error– This pseudo-class represents an input element with incorrect input, but only after the user has significantly interacted with it.

For example, the input in the following document fragment would match :invalid as soon as the page is loaded (because it the initial value violates the max-constraint), but it won’t match :user-error until the user significantly interacts with the element, or attempts to submit the form it’s part of.
<form>
<label>
Volume:
<input name='vol' type=number min=0 max=10 value=11>
</label>

5)Reference element pseudo class–:scope, represents any element that is in the contextual reference element set. This is is a (potentially empty) explicitly-specified set of elements, such as that specified by thequerySelector(), or the parent element of a<style scoped>element, which is used to “scope” a selector so that it only matches within a subtree.
An example of using this guy is within a<style scoped>
<style>
li {
color: blue;
}
</style>

<ul>
<style scoped>
li {
color: red;
}
:scope {
border: 1px solid red
}
</style>
<li>abc</li>
<li>def</li>
<li>efg</li>
</ul>

6) a beautiful hack –translateZ(0)can be used for forcing GPU acceleration on any element after providing that element with its own stacking context.
{
...
Transform: translateZ(0);
...
}


Handle with care when using this hack asAddi Osmaniquotes –

Be careful about this hack, particularly on lower-end devices where it’s easier to strain your VRAM, resulting in a noticeable lag if forcing such accelerations on every element.

7)CSS containmentcontain: strict– this property allows you to guarantee a boundary around an element for both layout and paint, assuming you opt for a value of “strict”. Here the GPU has a better idea on which things to focus on.

8)Resource priorities–lazyloadandpostponeattributes

With the lazyload attribute you can specify which essential resources you need to download first. The lazyload boolean and IDL attributes are supported on the following HTML elements and SVG elements capable of fetching resources: img, audio, video, script, link, embed, iframe, object, svg feImage, svg image, svg use, svg script, and svg tref.

On the otherhand postpone attributes indicates the priority order in which the User Agent will download the resource associated with the element when the element is not visible.

9) Now to one of the most exciting part of all those web designers who is waiting for that day when they could design inside the browser. Enter CSS blend modes. There are lots of web designer effects that we’re used to seeing in static designs (thanks to Photoshop) that we don’t see on the web much, with dynamic content. But that will change as CSS blend modes get more support. Lets look at the different ways of doing it, since it’s not exactly cut and dry.

Background blend modes – You can blend background-images together, or blend them with background-color. It’s a simple as :
.blended {
background-image: url(face.jpg);
background-color: red;
background-blend-mode: multi
}

A quick example wud be https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/blend-example-1.png
and likewise we have mixed blend modes using a blending property precicely for this purpose: mix-blend-mode. Eg : http://cdn.css-tricks.com/wp-content/uploads/2014/02/hungry.jpg

10)Object-fitproperties, helps you control the aspect ratios of your photos. This is a common concern in many Indian websites. When someone uploads an image file that isn’t quite the right size, you might want to have all images occupy the same space on a page, but not distort and lose their aspect ratio.

You can successfully apply object-fit to any replaced element, for example:
img {
height: 100px;
width: 100px;
object-fit: contain;
}


11) CSS filters photoshop-like filters on your images
img {
filter: sepia(100%)
}

12) Finally Shwetank winded up the session with three more CSS enhancements namely
CSS Masks
HTML Media Capture
GETUSERMEDIA,
which I will update with suitable examples later.

Thanks for reading.