Close

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 at Opera, and a member of the W3C 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-link refers 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 :current pseudo-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 :past pseudo-class refers to an element specified to happen before a :current element. A :future pseudo-class then, of course, refers to an element defined to occur after a :current element.

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 the querySelector(), 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 as Addi Osmani quotes –

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 containment contain: 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 prioritieslazyload and postpone attributes

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-fit properties, 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.

Latest stories

  • Things to Consider Before Hiring the Right Developer

    As the tech talent war continues to rage, it is no wonder that hiring the right developer takes forever. Managers face numerous difficulties not just hiring but retaining the right talent.If we are to go by statistics, the average time-to-hire for tech positions in the USA is 35 days. A realistic expectation is crucial while […]

  • 4 Ways To Reduce your App Development Costs by 50%

    Being multi-channel has become synonyms with the modern digital environment.Brand presence in these channels is critical to reach potential customers making it a vital business challenge of  the digital era.  Mobile apps have become an integral part of modern business. They are an extension of your brand. Considered as the most powerful business tool, apps […]

  • Tips to build a productive startup culture in your development company

    The word Startup paints a picture of tech-savvy professionals driving casual dress codes and sipping coffee from biodegradable cups in a space with enviable interior design, ping pong tables and bean bags. Ouch, the stereotype hurts! There is more to startups than bean bags and beer taps, it is the startup culture that fuels innovation […]

Leave a Reply

Your email address will not be published. Required fields are marked *