When we need to adjust a device’s browser viewport, the HTML <meta name="viewport"> tag is usually our go-to solution. But the viewport meta tag is surprisingly “non-normative”––it’s not a formal W3C spec, much less a web standard.

The viewport meta tag was first implemented by Apple in iPhone Safari, then other browser vendors quickly adopted it. It’s widely used today because of the popularity and market share of iOS, Android, and similar platforms for tablet and smartphone devices.

Since the viewport meta tag is strictly for layout, we can say that it rightfully belongs in the CSS. That’s why the W3C is attempting to standardize a new device adaptation method that moves the viewport control from the HTML to the CSS.

The @viewport CSS Rule

With the new @viewport rule we have the same viewport control we have with the meta tag, except that it’s done entirely with CSS. And like with the meta tag, it’s still recommended to set the viewport width using the device-agnostic device-width:

@viewport {
       width: device-width;
    }

Nowadays, @viewport is used by many developers because it’s necessary in IE10’s “snap mode,” a Windows 8 feature that lets users drag the browser window to the left or right of the screen in order to use two windows simultaneously. Strangely, IE10 ignores the viewport meta tag when the viewport is smaller than 400 pixels, so sites relying on it are never optimized for those smaller windows. To fix it, developers need to use the device-width example shown above, or define a @viewport rule inside a media query.

Using @viewport with Media Queries

We can use @viewport inside media queries for more precise optimization. For example, the following media query uses it to lay out any viewport narrower than 400 pixels (IE10’s snap mode, for example) to a scaled width of 320px.

@media screen and (max-width: 400px) {
       @-ms-viewport { width: 320px; }
       ...
    }

In this example, if a device is in the resolution range of 640px and 1024px, the @viewport rule scales the viewport to 640px.

@media screen and (min-width: 640px) and (max-width: 1024px) {
       @viewport { width: 640px; }
       ...
    }

@viewport’s New Descriptors

Although we’re still able to manipulate the zoom and scaling behavior, a few viewport properties––or descriptors, as they’re now called––have changed.

zoom

The zoom descriptor is equivalent to the initial-scale viewport property in the meta tag.

@viewport {
       width: device-width;
       zoom: 2;
    }

Like minimum-scale and maximum-scale, there are also descriptors for max-zoom and min-zoom:

@viewport {
       width: device-width; 
       max-zoom: 3; 
       min-zoom: 0.50; 
    }

user-zoom

The user-zoom descriptor is equivalent to the user-scalable viewport property.

@viewport {
       width: device-width;
       user-zoom: fixed;
    }

Browser Support

Currently, support for @viewport is limited to Opera and IE10. It seems like Chrome (and hopefully others) will be implementing it soon, though, as it’s expected to replace the viewport meta tag as the official web standard in the near future.

For now, @viewport requires vendor prefixing:

@-ms-viewport {
       width: device-width;
    }
    @-o-viewport { 
       width: device-width;
    }
    @viewport {
       width: device-width; 
    }

Of course, we still need to include the viewport meta tag, as that isn’t going away anytime soon. But it doesn’t hurt to start thinking ahead – adding the @viewport rule now simply makes our sites and apps future-friendly.

The post Thinking Ahead – CSS Device Adaptation With @viewport appeared first on Treehouse Blog.

The HTML Working Group updated two Candidate Recommendations today:

• HTML5, which defines the 5th major revision of the core language of the World Wide Web, the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.
• HTML Canvas 2D Context, which defines the 2D Context for the HTML canvas element. The 2D Context provides objects, methods, and properties to draw and manipulate graphics on a canvas drawing surface.

Learn more about the HTML Activity.

UMBC's Mobile, Pervasive and Sensor Systems Laboratory focuses on three key areas: renewable energy, healthcare applications and mobile phone systems. Their crowdsourcing-based technology for accurate and low cost detection of weed infestations was cited recently as one of the top ten technologies changing farm machinery by Farm Industry News.

D. Saraswat and N. Banerjee, Crowdsourcing App for Precision Agriculture Decision Making, ASABE Annual International Meeting, Dallas TX, August 2012.

The research was begun while Professor Banerjee was at the University of Arkansas, where the complex software system was  implemented by students Brenna Blackwell and Mahbub Rahman, who is continuing his PhD studies at UMBC.

Like the MPSSL Facebook page to follow their work or visit the MPSSL page

You might have seen a workflow where you can save out of DevTools to file. But have you seen it changes made in DevTools instantly update the code in your editor in real time? And vice versa?

Direct Link to Article — Permalink

Emmet LiveStyle is a post from CSS-Tricks