7 new techniques every web developer should know. CSS3 media queries With the rise of mobile devices, and on the other hand, of very wide displays, creating a website that looks great in both big and small devices is definitely a challenge for web designers and developers. Happily, the CSS3 specification have a new feature which allow web developers to define styles for a specific display size only. For example, the code below show how to apply a specific style only if the client display is smaller than 767px. More info: Create an adaptable website layout with CSS3 media queries Font resizing with REMs CSS3 introduces a few new units, including the rem unit, which stands for “root em”. If this hasn’t put you to sleep yet, then let’s look at how rem works. The em unit is relative to the font-size of the parent, which causes the compounding issue.
More info: Font resizing with REMs Cache pages for offline usage HTML5 introduces a great feature, offline caching. Caching pages is pretty easy. AddType text/cache-manifest .manifest HTML5 drag & drop. CSS Reference. Learning to Love HTML5 - Smashing Magazine. Advertisement It seems that new resources and articles for teaching and promoting HTML5 are popping up almost daily. We’ve been given HTML5 templates in the form of the HTML5 boilerplate1 and HTML5 Reset2 (although they both go beyond just HTML5 stuff).
We’ve got a plethora of books3 to choose from that cover HTML5 and its related technologies. We’ve got shivs4, galleries5, and a physician6 to help heal your HTML5 maladies. And don’t forget the official spec7. From my own vantage point — aside from a few disputes8 about what the term “HTML5″ should and shouldn’t mean — the web design and development community has for the most part embraced all the new technologies and semantics with a positive attitude.
Flickr Photo by Jeremy Keith9 While it’s certainly true that HTML5 has the potential to change the web for the better, the reality is that these kinds of major changes can be difficult to grasp and embrace. The Good (and Easy) Parts An <article> Isn’t Just an Article Section or Article? The 30 CSS Selectors you Must Memorize. Transparent CSS Sprites - Smashing Magazine. Advertisement One of the most useful front-end development techniques of recent years is the humble “CSS Sprites”. The technique was popularised by Dave Shea on A List Apart in 2004 with his article CSS Sprites: Image Slicing’s Kiss of Death1. CSS Sprites are a relatively simple technique once you understand the fundamentals and it can be applied in all manner of ways. A common use is for a graphic intensive navigation, but it can also be useful for buttons or even styling headings with the corporate font.
Sprites are simply a collection of images which are merged together to create a single file. You then use CSS, changing the background-position the image, to display the correct part of the image you need. I often use the analogy of a large object passing a window — you only see what is within the frame. Over the last couple of years CSS Sprites has been one of the most widely adopted CSS-related techniques. The Benefits and Potential Problems A Technological Solution Example The Images. Ultimate CSS Gradient Generator - ColorZilla.com.