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 LEGO-like software development using Microservices helped Toobler?

    Microservices: Legos for Software Development  We are so much in love with colorful plastic bricks aka LEGOs! In an age of online games and internet-connected toys, the humble Lego brick has risen against all odds.With approximately 62 pieces of Lego bricks for every man, woman and child  on the face of the earth, mere 6 […]

  • If you are in Jordan looking for app development support you should read this

    From downloading a mobile app  to visiting a brick-and-mortar store, customers today value every interaction with a brand. A great customer experience leaves a lasting impression in their minds about the happy and satisfying experience.  Winning the customer experience race Every  interaction offers  a make-or-break opportunity for a brand to either  build a loyal customer […]

  • Enhanced Efficiency & Optimized Cost of Project Development with Sweden Hybrid Model.

    Going beyond the cost factor and striving to deliver quality, innovation and flexibility to its customers across the globe, Toobler introduced a Hybrid (Onshore and Offshore) Software Development Model. Huge popularity of the hybrid model is fuelled by scores of organizations choosing to keep design and architecture phases at geographic proximity.  Driven by a customer-centric […]

Leave a Reply

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