MODERNWEB

In the newly launched redesign of the RevSystems, Inc agency site, I came across a few quirks with media queries that everyone should be aware of. 

1. Media Queries are sensitive to change

Media queries, as we know them today, have an extremely sensitive syntax. In many modern browsers, it won't necessarily matter how to write them out but for support in older browsers and for support with polyfills like Respond.js and CSS3-MediaQueries.js - the syntax is critical.

Ex:       @media screen and (min-width: 1200px) {}  

=/= 

      @media screen and(min-width: 1200px){}

**Spaces are critical

2. Internet Explorer treats media queries very specifically. (Go figure)

Media Queries in Internet Explorer are not natively supported, but with the polyfills listed above, they can be forced to work. However, these media queries also cannot be formatted any way you want.

Ex:       @media (min-width: 1200px) {

#this{will:work;in:modern browsers !only;}

}  

     @media screen and (min-width: 1200px) {

#this{will:work;in:all browsers;}

.if_you{are:using !polyfills;}

}  

3. When properly vetted, media queries are your friend. Don't be afraid to use them to handle breakpoints gracefully.

One important thing to understand is that your responsive design will have a lot of breakpoints. The more complex the site is, the more changes of items to work differently at modified resolutions, font sizes, browsers and more. Use media queries to your advantage and test across multiple use cases. That way, you can be very specific (min-width + max-width) with your queries and have a well tested responsive site.

"Today we are sharing our plan to automatically upgrade Windows customers to the latest version of Internet Explorer available for their PC."

Zeldman talks briefly about the news:

THE STATE OF THE WEB is about to get a whole lot better, as the living dead release their stranglehold on the Windows desktop and a new generation of beautifully standards-compliant IE browsers rolls out automatically to tens of millions of computer users...

Source: http://www.zeldman.com/2011/12/15/msie-auto-updates-a-holiday-gift-to-web-developers-everywhere/#comment-61250

We recently launched a redesign of the RevSystems agency website. The new site is completely responsive.

CSS User Agent is an absolutely phenomenal script that has made its way into my standard project starter.

When working on a complex website, especially now with responsive design being a huge focus, there are always issues that come up between different browsers. The tanks, Chrome and Firefox, each render type differently, space line-heights differently, pad items differently, and a whole host of other things.

CSS User Agent is a solution to those issues. If, just as an example, we were to code a div with a set of margins:

.divname{margin:10px 5px;}

Going along with the example, lets assume that Chrome renders this as 12px and 6px, while Firefox renders it at 10px and 5px. (This is not actually the case, but it is as simple an example as I can give)

Once you notice these, you can implement User Agent to specifically target those browsers. (You can even target down to specific versions and subversions of browsers, or their rendering engines: webkit)

So, we update our code to look like this:

  .divname{margin:10px 5px;}

.ua-chrome . divname{margin:8px 4px;}

This added style targets chrome and adjusts for the odd display of margins for that it rendered. 

I highly suggest looking into this. It has saved me hours of time on recent projects and allowed for quick fixes on older projects as well.

One of the major issues with using CSS3 today is cross browser support. Internet Explorer is still the diamond in the rough (wishful thinking) and, with the exception of IE9, cannot render many CSS3 effects. 

This is where CSS3 Pie comes in. CSS3 pie is a script that, when applied, renders CSS3 for Internet Explorer so that your precious code displays properly in the older browsers.

All you have to do is add a class to your css: behavior: url(path/to/PIE.htc); and watch it work. 

There is documentation on which specific CSS3 features are fully supported, so be sure to take a look there before you dive in.

We all know that CSS3 is growing wildly, and we all know that we can apply gradients to elements.

But, as of a week or two ago, Radial Gradients began making their rounds on the twitterweb.

Essentially these gradients function with the same syntax as linear CSS3 gradients, but with some extra variables, you can manipulate it into the radial style that we all know and.. sometimes love.

Playing WIth Matrices is a css project by Peter Nederlof that combines the fun loving "stretch this box until it looks absolutely atrocious" method with the "give me really complex css attributes so I don't have to do calculations myself."

Brilliant.

It essentially allows you to stretch, skew and rotate a box (div) and dynamically spits out the css needed to make it work.

  Link: http://peterned.home.xs4all.nl/matrices/

CSS3 Generator, the self-proclaimed "No 1 Generator on the web", is another great tool for people that aren't comfortable with hand-writing css3 yet.

The generator functions much like LayerStyles, mentioned in my previous post, because it has several options & sliders to create shadows, gradients and rounded corners.

The huge advantage to using this generator over LayerStyles, however, is its inclusion of "Minimal Internet Explorer 7 & 8 Support" - So, in generating code for div transparency, it outputs:

opacity:0.5;

-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

/*-ms-filter must come before filter*/

filter: alpha(opacity=50);

/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/

/*All filters must be placed together*/

Instead of only:

opacity:0.5;

It still isn't perfect (as if anything with IE is perfect) but it is a great assistant in achieving graceful degradation with your modern designs.

Have you ever wished that Photoshop's layer styles palette could output your perfected styles straight to code?

Granted.

LayerStyles v0.1 mimics Photoshop's layer styles palette and allows you to use the interface to recreate your regular styles and output the code that will display those styles with CSS3.

It is a really fantastic tool and definitely worth a look.

CSS 3's border radius property is an invaluable tool for web designers. Rather than outputting more images in your layouts, you can create a div with the border radius property to round the corners and therefore be completely flexible.

Important things to know about the border radius property:

As of this posting, it is not natively supported by all browsers. In order to use it, you must use a vendor prefix. (More on vendor prefixes below)

You have the ability to specify whether you want the property applied to all of the corners ( border-radius: #; ) or to a specific corner: border-radius-topleft: #px; - border-radius-topright: 3px; - etc

Border Radius is not supported by IE 8 and earlier. IE 9 does support it.

Vendor Prefixes

If you are new to CSS3, you may have heard this term being thrown around a lot. Vendor prefixes are integral to CSS3 right now. Browsers to not natively support CSS3 and therefore need these prefixes to tell them that the property you are using is a modern web technology. The prefixes are: -webkit (Chrome), -moz (Firefox) and -o (Opera). There are other prefixes that you can use to be safe, but these are the most heavily used browsers.*

One you know that you want to apply your property and you know which prefixes to use, it is just a matter of plugging in the data. 

.divclass{

       border-radius: 6px; 

       -moz-border-radius: 6px;  

       -webkit-border-radius: 6px;

}

The code above will display a div with all of the corners rounded by 6 pixels.

Enjoy!

...HTML5 doesn't enforce the same syntax that started with XML 1.0? 

Standalone tags (<br />, <em />, <strong />, etc) don't need the "/>" to close anymore.

Attributes do not have to be in quotes so: <img src="HTML5.jpg"> = <img src=HTML5.jpg>

The case of your tags does not matter. <BR> = <br>

And one of the more useful syntax changes: Grouped "a" tags:

Link tags can now encompass a set of code:

<a href="Link.html">

<h2>Here is my Title</h2>

<p>Some more text that is still linked.</p>