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

  • 7 Proven Hacks to Enhance Your Mobile App User Experience

    In this digital age of fierce competition, quality and performance easily outweigh brand loyalty. Creating a fluid user experience is essential for the  success of any mobile app. Efficient user experience UX is the backbone of a visually appealing and engaging app. It can either make or break an app.  Here are a few considerations […]

  • Things To Know About App Testing During Development

    With years of experience in app development and testing, we give utmost importance to quality assurance in mobile application development. Our team of adroit software testers ensures that quality assurance is an integral part of the development lifecycle right from ideation to deployment and in post-development reviews. Here are a few things the QA engineers […]

  • Go Live: 6 Things To Do Before Publishing an App

    After years of publishing applications to the app store, our team has come up with a checklist showcasing important things to do before publishing your app on Google Play or Apple App Store. Without further ado, let’s get started.  #1.Thoroughly Understand The App Store Policies and Guidelines It is vital to understand the app publishing […]

Leave a Reply

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