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

  • How Kerala’s IT Sector Braces To Fight COVID-19?

    In India and around the world, the impact of the coronavirus pandemic is evident across all sectors of the economy.  With  COVID-19 spreading rapidly around the world, the pandemic has not only affected the lives of hundreds of thousands of people but also demonstrated a growing impact on the global economy. From companies chalking out […]

  • How a DevOps Approach Helps To Meet Deadlines Every Time ?

    Missing a deadline never feels good!  Despite designing perfect workflows from start to finish, we often found our teams chasing deadlines until the very last moment. This upsetting trend led us to a quest to find out what obstacles prevented our teams from getting work over the finish line in time. The biggest factors contributing […]

  • Can You Fuel The Next Wave of Business Growth During a Pandemic?

    Pandemics and economic recessions are known to create disruptive effects on global economies and businesses. For e.g, the Black Death was a devastating bubonic plague that arrived in Europe during 1347. The catastrophe resulted in the collapse of the feudal system in Europe while replacing it with a more modern employment contract.  Covid-19 pandemic has […]

Leave a Reply

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