POSTED IN Blog | Comments Off
POSTED IN Blog | Comments Off
POSTED IN Blog | Comments Off
POSTED IN Blog | Comments Off
Speaking to an audience mainly composed of designers and brand strategists, John Gleason of A Better View Strategic Consulting provided crucial insight from the client's side of the table. "There is massive oversupply of designers, and a lowering of the bar on the client side," Gleason said. "When four hundred firms come to market, how is a client supposed to know [which one to choose] without having them do spec work?" He stressed the need for designers to learn how to have "business conversations" with their clients. "Both sides are complicit in the dysfunction. Designers need to be able to say what sets them apart. Articulate the value, and they'll move the money."
Also on the panel was Ric Grefe, executive director of AIGA, who surprised me with his nuanced take on the issue of spec work. Where I had expected fire and brimstone, I got downright Obama-worthy dancing between the two sides of the argument. After pointing out that AIGA has historically taken a hard stance against all spec work, Grefe said, "It's important that we not devote ourselves to protecting practices of yore that cannot be regained. The new norms are not the old norms. The question is: How do we ensure relevance for the design community? We can earn respect by responding to the marketplace." Grefe was not encouraging designers to do spec work, but asking the community to shift its competitive focus from other designers to management consulting firms such as McKinsey.
Panelist Brendan Murphy, senior partner at Lippincott, also advocated solidarity and eschewed attacking those forced to do spec work. He urged the audience not to "deride our partners in this industry. If I lost everything and had to move back to Dublin, I would do spec work in order to feed my family."
How, then, to ensure the survival of the design profession in what Jerry Kathman of LPK called a "relentless economic environment"? All of the panelists appeared to agree that designers in the USA need to accomplish an "upward ascent" in their professional identities, moving from craftsmen creating artifacts to overall brand strategists peddling "design thinking." "We don't think of ourselves as a project business, but rather as brand counsel providing strategic and design advice," said Murphy. Within his long-term relationships with clients, Murphy explained, there is even room for projects that look like spec work. "If a client calls me and asks for a favor, I almost always do it because it usually pays off in spades. Our existing clients will speak for us to help us secure new clients."
Could better PR be the answer? Grefe mentioned the Design Council of Britain's $2-million media campaign promoting the value of design. "Could designers in the US raise $1 million to launch such a campaign? We're not used to paying high rates to design associations," he said. John Gleason pointed out the irony behind the difficult situation currently facing the design community: "Designers are paid to brand their clients, but are terrible at branding themselves."
POSTED IN Blog | Comments Off
 |
We have been publishing articles about CSS3 for a while now, and we keep receiving angry e-mails from some developers who complain that it doesn’t make sense to use CSS3 today. Yes, Internet Explorer doesn’t support most CSS3 properties. And yes, CSS3 vendor prefixes are bad for maintainability (and this is why we recommend extracting vendor prefixes in a separate CSS3 file).
But it’s OK to accept that Web is a dynamic medium, and it’s OK to create rich, interactive, beautiful designs for those who are already using a modern browser or will be using one soon. It just doesn’t make sense to keep looking back, beiDang afraid of looking forward and therefore avoid experimenting and learning about new CSS3 properties today. And this is why we keep publishing articles about CSS3.
In this post we present an extensive round-up of CSS3 techniques, tools and resources that will help you learn how to use CSS3 in your designs right away. We have grouped most useful articles by the corresponding properties, described what browsers support what properties, presented alternative JavaScript-based approaches and workarounds for Internet Explorer and added a couple of links to useful CSS3 generators and tools in the end of the post.
You may be interested in the following related articles:
[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]
Let’s start with a review of some truly remarkable design techniques and experiments that show what can be done with a bit of coding, patience and creativity by using simple CSS3 properties.
Pure CSS3 Page Flip Effect
By using CSS3 gradients, transitions, 2d transforms and clipping, Roman Cortes achieved this pure CSS3 page flipping effect (no JavaScript is used). However, it works in Webkit browsers only (Safari and Chrome).
Create a Vibrant Digital Poster Design with CSS3
CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties we can begin to replicate design styles directly in the browser that beforehand were recently only possible in our design applications. Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS.
CSS3 Leopard-style Stacks
Pure CSS3 (and experimental CSS). No JavaScript. An experiment by Gordon Brander.
Wicked CSS3 3D Bar Chart
An attempt to create a 3D bar chart using CSS3. This example only works in the latest versions of Firefox, Chrome, Safari and Opera.
Selectable Headlines with Color Transition (CSS3)
A CSS3 color transition applied to a selectable text with CSS3. Works only in Safari and Google Chrome.
Our Solar System in CSS3
This is an attempt to recreate our solar system using CSS3 features such as border-radius, trans forms and animations. The result is surprising and quite interesting.
Fun With CSS Gradients
This similar looking display to that of the iPhone album display uses a radial gradient (opposed to a linear) as the background for the track names. The overall effect is a dim light. The odd numbered tracks also use a gradient to take advantage of -webkit-gradient’s support of alpha values.
CSS3 Bookshelf
A very interesting idea that doesn’t look very nice because of rotation rendering, but is worth experimenting nevertheless.
Pure CSS Twitter Fail Whale
Curves are done using various uneven border-radius properties, stranger angles (such as the strings) are masked using containers with overflow: hidden; set on them.
CSS World Clocks
Another interesting experiment that uses CSS3 and a bit of PHP to create an interactive clock.
3D Text Tower
What happens if you lay a couple of text shadows over and over again? Interesting hover-effect.
Creating a Realistic Looking Button with CSS3
“I had previously created the Cadmus “post” button in Photoshop and it was essentially three images for the different states. I wanted to use this style for all our buttons, but doing it with single images is not a good idea. So I set about creating the same style of the buttons with CSS3.”
CSS3 Spotlight
Turn on the light! Works with Webkit & Firefox.
Pure CSS3 Animated AT-AT Walker from Star Wars
In this article you;kk walk-through the process of creating a CSS3 animation of an AT-AT Walker from The Empire Strikes Back. The author starts off by reviewing some CSS3 properties that made this animation possible. Then, he follows up with a list of the sections required to construct the AT-AT and the CSS3 code to move each section.
Pure CSS Icons
An experiment by Zander Martineau. with a large scoop of border-radius, Zander created various ‘common’ icons that could be used in your web apps.
Create a Content Slider Using Pure CSS
The idea was to create a working example without the aid of JavaScript, using layers in CSS and using CSS3 transitions to give the slider the necessary animation.
Sexy Tooltips with Just CSS
While many innovative solutions exist using CSS and JavaScript (with and without JavaScript frameworks like jQuery), it’s sometimes useful to look towards new technologies to examine the impact they may have on our current techniques. This tutorial looks at how using the evolving CSS standard can enhance some lovely cross-browser tooltips.
Creating a Polaroid photo viewer with CSS3 and jQuery
This example is making use of CSS3 and jQuery, just to show the effect when combining two powerful techniques. The CSS3 is injected by jQuery, keeping the CSS file clean.
Animated Photoshop selection using CSS3
When part of an image is selected in Photoshop, the area is highlighted by an animated dashed line. Matthew James Taylor figured out a way to get exactly the same effect using CSS3.
Sexy Image Hover Effects using CSS3
This post shows how to create a sexy CSS effect on image hover.
CSS3 Dropdown Menu
A multi-level dropdown menu that was created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compatible browsers such as IE7+, but the rounded corners and shadow will not be rendered.
Middle Box Links
What we have here is some boxes of content. The goal is that when you mouse over them, they darken and a link appears in the exact center of them.
Contextual Slideout Tips With jQuery & CSS3
By now, you’ve probably heard about Adobe’s new CS5 software pack. Also, you’ve probably seen their product pages, where they present the new features of the suite. Apart from the great design, they’ve also implemented an interesting solution for showcasing the new features their products are capable of – using contextual slideout tips.
Beautiful UI styling with CSS3 text-shadow, box-shadow, and border-radius
This article takes things further, showing how to use the properties to create beautiful UI elements without the use of any images, JavaScript or Flash. This last line highlights the real beauty of CSS3 — many of its features are designed to save you time otherwise spent creating and updating graphics in Photoshop. It makes techniques such as drop shadows and animated UI elements accessible to web developers and designers without scripting smarts or mad Photoshop skills.
This section provides you with a general overview of the introductory articles about CSS3. This is a nice starting point to learn what CSS3 is, which properties it has and how designers apply them to web designs.
The Basics of CSS3
Here is a post on the basics of the new properties: text-shadow, box-shadow, and border-radius. These CSS3 properties are commonly used to enhance layout and good to know.
Introduction to CSS3
A great series of articles by David Appleyard which covers most new features of CSS3 including borders, text effects, user interface features, multiple columns and backgrounds. The series also contains many examples and code snippets. Very useful.
CSS3 Examples and Best Practices
The CSS3 trend is getting more and more popular. In fact CSS3 new features open a lot of new possibilities. Check out my previous post on “CSS3 Animation Demos” to see the things that you can do with it. However, don’t get too excited so soon because it is not fully supported by all browsers yet. But this doesn’t mean you shouldn’t use it at all. So, when should you use CSS3 new features? Well, continue on this post to see some excellent examples.
CSS of the Future: How CSS3 can Optimize Design
The design blogosphere has been buzzing about the improvements level 3 of Cascading Style Sheets will bring. Although still a ways off from official recommendation status by the W3C, some browsers are already supporting pending features. I want to highlight a few of the CSS3 features I’m excited about that will not only add flexibility to the design process, but that will aid with search and conversion optimization as well.
Practical Uses of CSS3
A user is not going to pull up your site in two different browsers to compare the experience, so they won’t even know what they are missing. Just because something is not fully supported, that does not mean that we can’t use it to an extent. In this article I’ll show you some practical uses for CSS3.
You Can Use CSS3 Right Now
CSS3 makes a designer’s work easier because they’re able to spend less time hacking their CSS and HTML code to work in IE and more time crafting their design. It is the future of web design and can be used today. This article will hopefully show you to care a little less about making everything pixel perfect in IE. It will inspire you to spend more time making your designs exquisite in the rest of the browsers while serving up a working and perfectly accessible website for IE.
CSS3 + Progressive Enhancement = Smart Design
Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before.
The advanced CSS selectors in CSS3 make it much easier for developers to apply style to specific design elements without using unnecessary CSS classes or <div>-containers. Unfortunately, Internet Explorer will support most of CSS3 selectors only in IE 9 (detailed support table), so we would need to use JavaScript-solutions for older versions. Supported by Firefox 3.5+, Safari 3.2+ and many selectors are supported by Chrome and Opera, too (use the link above).
Taming Advanced CSS Selectors
The best way to avoid these plagues spreading in your markup and keep it clean and semantic, is by using more complex CSS selectors, ones that can target specific elements without the need of a class or an id, and by doing that keep our code and our stylesheets flexible.
The Skinny on CSS Attribute Selectors
Every single CSS element has three attributes: ID, class, and rel. To select the element in CSS, you could use and ID selector (#first-title) or a class selector (.magical). But did you know you can select it based on that rel attribute as well? That is what is known as an attribute selector.
Meet the Pseudo Class Selectors
Pseudo class selectors are immensely useful in a variety of situations. Some of them are CSS3, some CSS2… it depends on each particular one. Outside of IE, they have great browser support. In IE land, even IE8, support is pretty barren. However, the IE9 preview has full support of them.
A Look at Some of the New Selectors Introduced in CSS3
A very practical article, introducing concrete examples and code snippets for using CSS3 in your design (e.g. alternate row styling, specific row styling, first and last element styling as well as styling enabled and disabled input fields).
CSS3 Selectors Browser Support
The following is a range of CSS tests of the most common browsers’ support for selectors and pseudo selectors. The tests includes basic stuff from the good old days of CSS1 and funky stuff from the future (CSS3).
IE-CSS3.js: CSS3 pseudo-class selector emulation for IE
This library allows Internet Explorer to identify CSS3 pseudo-class selectors and render any style rules defined with them.
Sizzle – JavaScript Selector Library
A pure JavaScript CSS selector engine which supports all CSS3 selectors, including advanced ones such as escaped selector support (#id\:value), :contains(text), has selector (:has(div)), position selectors (:first, :last, :even, :odd, :gt, :lt, :eq), form selectors and header selectors. The tools also provides meaningful error messages for syntax problems.
Sly — The JavaScript Selector Engine
A quick, cross-browser JavaScript class for querying DOM documents using CSS3 selectors. It allows for customizable pseudo-classes, attribute operators and combinators and contains extra optimizations for frequently used selectors and latest browser features.
Offspring.js
Offspring is a JavaScript library that applies CSS classes corresponding to some advanced CSS selectors, opening the door for more precise selectors in previously-incapable browsers. A lightweight library which in full mode supports only first-child, last-child, only-child, nth-child-odd, nth-child-even, and nth-child-##.
YUI Selector Utility
The YUI CSS3 Selector Utility, providing a compact shorthand for collecting, filtering, and testing HTMLElements.
Getting Buggy CSS Selectors to Work Cross-Browser via jQuery
A simple table that describes a number of CSS selectors that are not cross-browser compatible, along with the jQuery syntax for each.
CSS3’s border-radius is most certainly a godsend for developers. Implementing rounded corners with 4 images of fixed size, using them with CSS background image property and adding a couple of unnecessary div’s just to make it all work sounds like a nightmare, and indeed it was a nightmare. CSS3 makes it possible to use a standard CSS property to achieve the same effect. Besides, we can use some nifty advanced background features to add border-image or multiple backgrounds to our designs. Advanced border and background features do not work in IE, so we will need workarounds again.
An Ode To Border-radius
Border-radius: web designer’s sweetheart and (sadly) the one that IE8 forgot, destroying many a web designer’s dreams. This post explains how it works, what are some of the cross-browser alternatives, and showcases some websites that took a step ahead and implemented it.
CSS3 borders, backgrounds and box-shadows
This general article showcases some examples made using the new properties in the W3C’s CSS3 Backgrounds and Borders specification. It explains the properties background-clip, background-origin, border-radius, Multiple background images, background-attachment, box-shadow and border-image.
CSS3 border-image
CSS3 draft introduces one that could be terribly powerful: border-image. This article explains what it can do today, how you can use it and how to make it work in Internet Explorer 7+ (JavaScript library).
Multiple Backgrounds and CSS Gradients
Among CSS designers, there are those who are venturing ahead with CSS3 and are likely to run into a world of interesting quirks across the various platforms. Multiple backgrounds by itself is simple enough, as are CSS gradients, but combining the two is where things get interesting.
CSS Three — Connecting The Dots
This article describes how you can use background-clip property together with other CSS3 properties to create an experimental design.
CSS3 Background-Clip and @Font-Face
An experiment with background-clip: text and @font-face via Typekit. When I finished Volume 2 in my Quoting Lebowski series the first thing that came to mind was that I bet I could CSS this.
Backgrounds In CSS: Everything You Need To Know
This article shows some common tricks that can be done with the background as well as what’s in store for backgrounds in CSS 3 (including four new background properties).
Cross-Browser Multi-background images, including IE
One of the biggest problems with using the CSS3 Multi-backgrounds is that it is not usable in Internet Explorer, however by using the: ‘AlphaImageLoader IEFilter’, it is possible to place two background images in an element.
Multiple backgrounds with canvas drawing
All modern browsers are compatible with the canvas-tag, beside of Internet Explorer, but Google created a superb piece of javascript that ported the canvas to IE. This little piece of JavaScript draws multiple backgrounds in a canvas element behind HTML elements.
cssSandpaper – a CSS3 JavaScript Library
The cssSandpaper JavaScript library looks at the stylesheets in an HTML document and, where possible, smooths out the browser differences between CSS3 properties like transform, opacity, box-shadow and others. This script is not only useful for developers who want to support CSS3 in IE.
Emulating CSS3 border-radius and box-shadow in IE7/8
A thread on StackOverflow that explains how to emulate border-radius and box-shadow on IE7/8.
CSS3 Solutions for Internet Explorer
Smashing Magazine’s article explaining how to make border-radius, box-shadow, multiple backgrounds, gradients and CSS Transformations work in Internet Explorer.
Web design community has been experimenting with adaptive layouts for a while now, and with CSS media queries we now finally have a very simple and powerful tool to implement adaptive layouts without the use of JavaScript. Support: Firefox 3.5+, Safari 4.0+, Chrome 3.0+, Opera 9.6+, Internet Explorer 9.0. Again: we will need a JavaScript-solution for Internet Explorer.
CSS3 Media Queries
A detailed slideshow presentation by Russ Weakley.
How to use CSS3 Orientation Media Queries
For a long time we have been able to specify styles for different media types using CSS, print and screen being the most recognizable. With CSS3 these media types have been extended to allow additional expressions, aka media queries, which gives us greater control on when specific styles should be applied. In this article I will focus on the orientation media query and have a fun demonstration showing how to use it.
Detecting device size & orientation in CSS
Gone are the days when we could safely assume that most our site visitors would have at least a 1024px-wide screen resolution. With smartphones and tablet computers on the rise, you visitors could also be browsing the web with screen widths ranging from 320px upwards. Does your site look good on a 768px-wide canvas? That’s how people will see it using a portrait-oriented iPad.
How to use CSS3 Orientation Media Queries
For a long time we have been able to specify styles for different media types using CSS, print and screen being the most recognizable. With CSS3 these media types have been extended to allow additional expressions, aka media queries, which gives us greater control on when specific styles should be applied.
Different Stylesheets for Differently Sized Browser Windows
This article explains how to implement resolution-dependent layouts using CSS3 media queries and JavaScript for Internet Explorer. Single website, different CSS files for rearranging a website to take advantage of the size available.
Media Query JavaScript library
Media queries and device capabilities are currently not exposed to JavaScript directly. You can use this library to detect the capabilities of the browser and adapt your web page or widget accordingly.
CSS 3 Media Queries for all Browsers (jQuery Plugin)
The script adds basic Media-Query-Support (min-width and max-width in px units ) to the browsers. It helps you to create a dynamic resolution dependent layout with Web standards in mind.
css3-mediaqueries.js: make CSS3 Media Queries work in all browsers (JavaScript library)
A JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+ and Safari 3+ already offer native support.
CSS3 Multi-Column layout module proposes a new technique for web layouts. As an alternative to relative/absolute positioning and floats, you can also use multi-column properties for cross-browser multi-column layouts. Obviously, this feature is great for magazine layouts and designers using grids or horizontal layouts. Support: Firefox 3.0+, Safari 3.2+, Chrome 3.0+. Neither Opera nor Internet Explorer support these features, and it’s not clear if Opera will include multi-column layout support in the upcoming version. Again, a workaround is necessary here.
Remembering: The CSS3 Multi-Column Layout Module
Multi-column layout module allows you to layout the content of an element in multiple columns, like flowing text on a newspaper-type layout. Some of these Modules are at a more advanced stage of development and closer to being final than others. You can take a look at the Current Work table here.
Using CSS3 media queries to achieve multiple columns on browser resize
This article explains how to combine CSS3 media queries and Multi-column layout module in CSS3 to create an adaptive CSS layout.
Multi-column layout Module
The ever more delayed CSS 3 specification has a Multi-column layout module. Unsurprisingly, this module specifies ways and means of creating multi-column texts. This article contains a few tests of the column declarations.
CSS3 Multi-Column Thriller
A detailed article about the CSS3 Multi-column Layout module, its features and possibilities. By Andy Clarke.
Columnizer jQuery Plugin
The primary problem with static column layouts, is that they break down when viewed on a variety of widths. There’s no good way to have multiple dynamic columns for your content. What’s needed is to adapt to the user’s screen width, and allow content to easily be resized and refit to as many columns as needed. What’s needed is the JQuery Columnizer Plugin. And, obviously, it works in Internet Explorer, too.
CSS3 – Multi Column Layout JS Library
A javascript implementation of the CSS3 multi-column module.
Multi Column List with jQuery
“Instead of relying on consistent line heights, and applying different margin settings to list elements, I decided to decompose the large source list into several smaller lists (one for each column) and then use a CSS float parameter to make them all appear side-by-side.”
With CSS3, web designs will be gaining more depth in the future. We can easily define the alpha transparency level of design elements in CSS, without extra images and extra markup. Support: Firefox 3.0+, Safari 3.2+, Chrome 3.0+, Opera 10.1+. Until yet, Internet Explorer does not support RGBa and HSLa, and Internet Explorer 9.0 will be supporting RGBa.
Working With RGBa Colour
CSS3 introduces a couple of new ways to specify colours, and one of those is RGBa. The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency. This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through. Like with layers in Photoshop.
Yay for HSLa
An introduction to HSLa (Hue Saturation Lightness(and alpha) and it’s a way of declaring color in CSS. Basically, every browser that supports RGBa, supports HSLa too.
RGBa CSS Generator for Internet Explorer
If you’ve been keeping up with how recent browsers have been implementing parts of the CSS3 spec, you may already be using RGBa to define semi-transparent background colors. You’d also know that this works in recent versions of Firefox and Safari, but not in any version of Internet Explorer. This generator should solve your headache when you want to apply RGBa to your next project.
CSS3 Opacity
This article explains how you can apply opacity to change the transparency of an element and offers a cross-browser solution for that.
RGBa vs Opacity: The Difference Explained
When we apply an opacity value to an element, the opacity value is inherited by all its child elements. RGBa sets the opacity of the color value of that particular element and the transparency is not inherited by its child elements. In other words, RGBA sets the opacity value only for a single declaration.
Is CSS3 RGBa ready to rock?
A detailed article explaining why we can start using RGBa in our designs today.
HSL, RGB and Alpha Transparency
This article explains how the HSL (Hue, Saturation, Lightness) and RGB (Red, Green, Blue) color models work (and the alpha transparency options in both color models).
HSLa and RGBa Explorer
This little tool helps you to pick RGBa and HSLa color values for your designs. By Chris Coyier.
Colors In CSS3 (Slideshow)
A presentation by Lea Verou.
RGBa Browser Support
The article describes how browsers handle RGBa and what options developers have to guarantee the cross-browser RGBa support.
Many regular tasks that we are performing using Photoshop today, will be easy to implement with simple CSS3 styles. One of such task is adding gradients to our design elements. The advantage is clear: we are creating scalable vector graphics in the browser and we save HTTP requests. CSS3 gradients fall into the camp where you can specify fallbacks (i.e. images), so that browsers that don’t support them just use the image instead. Good news: using different syntax for different rendering engines, we can use gradients in all browsers.
Playing with CSS3 gradients
CSS3 gradients and masks are so powerful together that the average web application would never need an image for layout anymore. And it’s not about making simple buttons. Mixing multiple gradients, masks, box-shadow and text-shadow you can achieve extremely complex results.
Speed Up with CSS3 Gradients
WebKit browsers paved the way with CSS based gradients. Now Firefox 3.6 is out and is supporting them as well, which makes using them for progressive enhancement all the more appealing. More good news, CSS3 gradients fall into the camp where you can specify fallbacks (i.e. images) so that browsers that don’t support them just use the image instead. But what if you need to use an image anyway, why bother with declaring the gradient with CSS? That is kind of how I felt for a long time, but there is one important aspect that makes it worth it: browsers that support them don’t load the image fallback. One less HTTP Request = all the faster your site will load.
Cross-Browser CSS Gradient
This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome.
CSS: Radial gradients syntax
In this article you’ll explore the various properties of radial gradient backgrounds as implemented by the WebKit and Gecko rendering engines. Gradients can used as backgrounds, pseudo-images and image masks among other things.
CSS3 Gradient Buttons
Today I’m going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc.
CSS3 Gradient Generator
This tools generates CSS3 snippet for Webkit and Mozilla that can be used everywhere, be it a background-image, mask, border, or list item bullet. Another CSS3 linear gradient generator and yet another one.
CSS Gradients For All Web Browsers, Without Using Images
Robert Nyman explains how to code cross-browser CSS gradients that work even in Internet Explorer.
Quick Tip: Understanding CSS3 Gradients
We can now create powerful gradients with minimal effort. In this video quick tip, we’ll examine some of the differences in syntax when working with the -moz and -webkit vendor prefixes.
(Kind of) Cross-Browser CSS Gradients via Canvas
CSS Gradients via Canvas provides a subset of WebKit’s CSS Gradients proposal for browsers that implement the HTML5 canvas element. Unlike WebKit, this implementation does not currently allow gradients to be used for border images, list bullets, or generated content. Rudimentary gradients may be achieved in IE by means of its non-standard gradient filter.
Technically, @font-face attribute is not a CSS3 features, as it was proposed already in CSS 2.1. However, it is now being heavily used and provides designers with more freedom in their choice of typography in web design. @font-face is supported by all major browsers (Firefox 3.5+, Safari 3.2+, Chrome 4.0+, Opera 10.1+, Internet Explorer 6.0+). However, Trident (Internet Explorer) only supports EOT fonts. Opera does not support the font when ‘format(“opentype”)’ is used, although it does otherwise appear to support OTF fonts. For Internet Explorer, we need to use EOT-Kits such as FontSquirrel’s one to make IE play nicely. Another option is to use commercial and/or open source font embedding services such as TypeKit or Google Fonts API.
The Future Of CSS Typography
In this article, we’ll look at some useful techniques and clever effects that use the power of style sheets and some features of the upcoming CSS Text Level 3 specification, which should give Web designers finer control over text.
Text-Shadow Exposed
An older, yet still useful article that provides a detailed
introduction to the CSS property text-shadow. Browser support table is provided as well. Text-shadow is support in Firefox 3.5+, Safari 4.0+, Chrome 3.0+, Opera 9.6+, and not supported by the whole Internet Explorer family.
The Essential Guide to @font-face
This guide will teach you how to implement @font-face with cross-browser compatibility and will also look at a number of the supporting services that have arisen, making it even easier to use custom fonts in your web designs.
@font-face generator
An advanced generator of ready-to-use @font-face kits for various font formats, CSS styling and options. Also, check FontSquirrel for dozens of useful, freely available @font-face font kits.
The New Lens Flare
“By abusing the text-shadow property, you can turn any ho-hum bit of text into a magnificent, radiant beacon of allure and awe. But getting your bling-bling on has never been for the cheapskates. Expect to pay a boatload in refresh rates, as your browser buckles under the weight of rendering that glorious halo.”
Text-Shadow In IE With JQuery
One handy little thing of Internet Explorer is that it also gives you access to CSS declarations it does not understand, so we can simply request the text-shadow value of a given element and process that. Works in Internet Explorer 5.5+.
CSS-3 Text-Shadow
CSS3 Text Shadow is not supported by Internet Explorer, but it is however possible to create an equivialant effect with the IE proprietary CSS Filter Blur and served with the jQuery plugin jquery.textshadow.js.
jQuery Plugin To Create CSS3 Text-Shadows In Internet Explorer
Another approach that uses IE’s shadow filter instead of blur filter. IE6, IE7 & IE8 do not support the CSS3 text-shadow property, and one form of shadowing they support is the proprietary shadow filter.
Another nice feature is the flexible box model which makes it much easier to create fluid layouts which adapt themselves to the size of the browser window or elastic layouts which adapt themselves to the font size. Also, you can specify a border/padding value in relation to a fluid length element with the new ‘box-sizing’ property (supported by IE8+ and all major browsers). Finally, you can also define box shadow to add more depth to your design elements (unavailable in IE 9, available in all major browsers).
CSS3 box-sizing attribute
CSS3 is going to include a new attribute called box-sizing so we can choose whether the width set on an element will include borders and padding or whether borders and paddings will be added to the width. Further details.
The CSS 3 Flexible Box Model
CSS 3 introduces a brand new box model in addition of the traditional box model from CSS 1 and 2. The flexible box model determines the way boxes are distributed inside other boxes and the way they share the available space. Take a look at the support table and tutorial, too.
Resizing, Box Sizing, Outline
CSS3 brings some great new properties relating to resizing elements, cursors, outlining, box layout and more. This article focuses on three of the most significant user interface enhancements.
Box Shadow Online Generator
CSS Shadows take three length values, and a color. The length values are a horizontal offset, a vertical offset and a blur. offsets may be negative or positive.
Fun With Box Shadows
This articles illustrates dozens of nice examples of how box-shadow can be used to achieve various visual effects.
Cross-browser CSS3 box-shadow
There is a simple way for creating cross-browser box-shadow in all modern and popular browsers including Internet Explorer (Opera only since 10.50 pre-alpha version). The solution uses VML and behaviour.
CSS3 box-shadow for IE 6-8
This article presents a very dirty way of making CSS3 Box Shadow work in Internet Explorer. The idea is to use Microsoft Shadow Filters and zoom-property. In German, but the code should be self-explanatory.
CSS designers with sympathy for eye candy will find many intriguing features in CSS3 Transitions, Transforms and Animations. These are most useful when used in a subtle way, for visual feedback and smoothing user interaction. Until yet, transitions and animations are supported only in Webkit-browsers, transformations are supported only in Safari 5.0+. Unfortunately, there are no real alternatives or workarounds. So using these features makes sense only with progressive enhancement in mind.
Going Nuts with CSS Transitions
This post shows you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.
CSS3 Transitions – Are We There Yet?
The whole topic has been split in two parts. The first part is offering a general overview in current status of CSS3 Transitions. Second part is called “CSS3 Transitions — Problems and Solutions”, which will explain in details how CSS3 Transitions behave in different browsers.
Sexy Interactions with CSS Transitions
While Webkit-based browsers have had CSS Transitions since Safari 3.1.2, other browsers are only just now coming out with nightly builds supporting this exciting new part of the CSS3 specification. With all browsers except for IE being slated to have Transitions support in the coming months, more and more web designers are turning to this powerful technique as a means to enhance their website’s user experience.
Using CSS3 Transitions, Transforms and Animation
Currently transitions and 2D transforms are available in all current browsers (at least in a dev build) apart from Internet Explorer. 3D transforms and animations are only in Safari. Most examples degrade nicely, so if you are using a legacy browser you can still use a site using these, you just won’t get animation.
CSS Transitions 101
Despite people’s expectation of change and movement on the screen, CSS and HTML have few controls that allow you to design interactivity, and those that exist are binary. What we need is a quick and easy way to add simple transitions to the page and in this article you’ll find useful information about CSS transitions and how to use them.
CSS Fundamentals: CSS 3 Transitions
This article explains the basics of using CSS3 transitions and animations to add an extra layer of polish.
CSS3 loading spinners without images
While playing around with css-transform to make various shapes, I saw a way to create animated image-less loading spinners such as used in a lot of web-apps and of course on the iPhone.
3D animation using pure CSS3
The perspective property in Safari CSS Visual Guide is what we need to create the 3D effect. Using transform and transition, we can create 3D animation using pure CSS3.
First Ever 3D CSS WordPress Theme
CSS3 offers great opportunities for 3D transforms, perspective, and animation. Currently Safari is the only browser that fully supports it, but Firefox and Chrome will add support soon. With that we can take regular objects (WordPress posts in this case) and animate them.
border-radius-property.border-radius, box-shadow, text-shadow, RGBa, @font-face, multiple columns, box-resize, box-sizing and outline.border-radius, box-shadow, linear gradient, RGBa, transform, transition and @font-face.Modernizr
A small and simple JavaScript library that allows you to use if-statements to check if a certain feature is available in the browser and gives you a fine level of control over older browsers that may not yet support these new technologies.
© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: css3
POSTED IN Blog | Comments Off
Online portfolios are a key part of any creative professional’s marketing arsenal. Whether you’re a graphic designer, photographer, writer or some type of artist, prospective clients want to see your goods – they want to check out what your skills you have to offer them. However, displaying your hard work on the Internet puts it out there for thieves to exploit – those people might simply grab it. Some of them have malicious intentions, as they might pass your work samples off as their own for financial gain, while others simply don’t know any better and may post your design or photo with no credit to illustrate a blog or adorn a website.
I spoke with intellectual property attorney Jed Phillips about what artists can do to protect their creations once they’re posted on the Internet.
Are photos copyright-protected when posted online, whether on Flickr, Picasa or other sites?Short answer: Yes, you do not lose your copyright by posting your work online (whether music, pictures, video, text, etc.)
Longer answer: Copyright gives you the right to control your work (assuming the work is covered by copyright, which is a wholly separate issue). The three big rights for creative people online are:
There are other rights, but these are the big three that are going to impact most creative professionals. As an example, if someone pulls an image off of Flickr, uses it to create an ad and then publishes that ad online, they are creating a copy of the work (the copy they have stored on their computer, printed out, e-mailed, etc.), a derivative work (creating the ad incorporating the copyrighted work) and distributing the work (posting it online). If unlicensed, these are all potential infringing actions.
The copyright holder has the right to control the use of their work. The normal expression of that right is a license, either explicit or implied. An explicit license sets out the conditions under which a right holder will permit (i.e., refrain from enforcing their rights through a suit) copying, distribution or the creation of derivative works. The licenses can be vague or incredibly specific – it depends on what the right holder wants. There are some “off the rack” licenses that creative professionals can use. Probably the most familiar would be the various Creative Commons licenses. Flickr uses these and has a quick and easy system for a rights holder to designate which license they would like to apply to their work. Some of the licenses control derivative works and copying; others permit any use (including commercial) so long as the rights holder receives credit (“attribution”). Anyone posting on Flickr should review the license descriptions before posting and make sure they select the license they want.
There are practical and legal steps they can take. Realistically, the legal steps are less effective than the practical steps. As an initial matter, if they are putting their work up online, they need to make sure they read the site terms and conditions before they post anything. Facebook, for example, has some interesting and somewhat controversial terms about what they can do with anything you post. If they don’t like the terms, don’t post and let the site know why. If they have their own portfolio site, then they need to have a copyright blurb somewhere (the more prominent the better, but I know that isn’t likely) that sets out what folks can do with the files posted on the site.
For practical steps, common sense is a good guide. Post low-resolution images, use watermarking, make sure the site logs IP addresses (If you plan on enforcing a copyright, proving that a particular computer accessed it, and when, can be useful.), etc.
Always start friendly, if possible. Many people view anything posted online as fair game. If someone has their work stolen, sometimes it only takes a gentle reminder that the work isn’t up for grabs to stop the behavior. If that fails, then the next step is a DMCA notice and take-down letter. The rights holder can send a letter (the format is spelled out in the code, and there are countless examples online) to the ISP, and the ISP will generally remove the infringing work.
If the offender is particularly persistent, then it’s time to chat with a lawyer. Sometimes a letter from a lawyer will work where more informal dispute-resolution efforts failed.
If the letter from the lawyer fails, it’s time to have a chat about obtaining an injunction and damages. At this point you are discussing federal litigation. This is generally where you have to decide just how important or egregious the infringement is and what it is worth.
Sponsored by
Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)
How To Protect Your Creative Work Online
POSTED IN Blog | Comments Off
|
Over the last years we’ve got a pretty good understanding of what CSS does, how it works and how we can use it for our layouts, typography and visual presentation of the content. However, there are still some attributes that are not so well-known; also, CSS3 offers us new possibilities and tools that need to be understood, learned and then applied in the right context to the right effect.
In this round-up we present fresh useful articles about less-known CSS 2.1 and CSS3 properties as well as an overview of recently published CSS techniques, tools and tips for designers and web-developers. Please stay tuned: next week we will present the second part of this article, featuring fresh CSS3 techniques, tools and resources.
[By the way: The network tab (on the top of the page) is updated several times a day. It features selected articles from the best web design blogs!]The Little Known font-size-adjust Property
Ever wanted to use fallback fonts on your CSS with different aspect ratios without them looking huge (or tiny)? The sparkling new CSS3 font-size-adjust property could do just that.
Demystifying CSS At-Rules
CSS at-rules (or @rules) are so-named because they utilize the ‘@’-character. They aren’t used as often as other CSS elements, and so it may be easy to overlook their function. If you’ve ever been confused about CSS at-rules, here’s a quick guide.
The CSS white-space Property Explained
CSS has a pretty useful property called white-space that often goes unnoticed among CSS beginners. You can probably live without this property for quite some time, but once you learn how to use it, it will come in very handy and you’ll find yourself going back to it over and over again.
How nth-child Works nth-child is one of those rather unfortunate CSS attributes that is caught between nearly full cross-browser compatibility, except for completely zero support in IE, even IE 8. By Chris Coyier.
The CSS3 :target Pseudo-class And CSS Animations
There are so many underused techniques that we could be applying to our designs as an enhancement layer. Let’s take a brief look into the :target pseudo-class and a very simple CSS animation.
The space combinator
Combinators are an overlooked part of CSS development. Most juniors don’t even know they are making use of them, others are unaware of their full potential and let’s face it, even most professionals don’t really know about the ins and outs of css combinators. It’s all connected to that little piece of nothingness in between class names, so let’s start by taking a good look at the space (descendant) combinator.
Cross-Browser Inline-Block
Ah, inline-block, that elusive and oh so tempting display declaration that promises so much, yet delivers so little. An article explaining what inline-block is, how it works and what it is good for.
The Skinny on CSS Attribute Selectors
Single element has three attributes: ID, class, and rel. To select the element in CSS, you could use and ID selector (#first-title) or a class selector (.magical). But did you know you can select it based on that rel attribute as well? That is what is known as an attribute selector.
The Mysterious Pseudo Class in CSS
Pseudo classes let you control the CSS of stuff in different forms, states and places easily and efficiently, without taking up too much room. CSS3 is going to introduce many new pseudo classes, and they’re going to make our lives a lot easier (if you take browser compatibility out of the equation). They help both aesthetics and usability, and can make things that were once hard easier than ever before.
CSS Opacity: A Comprehensive Reference
This reference is going to provide a detailed overview of CSS opacity, along with some code examples and explanations to help you implement this useful CSS technique in your projects equally across all browsers. One thing that should be noted about CSS opacity is that, although it’s been in use for a number of years now, it has never been, and is currently not a standard property. It’s a non-standard technique that is supposed to be part of the CSS3 specification.
Visual Walkthrough of @font-face CSS Code
In step-by-step visual format, this article will show you what the code is doing and how to use it with your own custom fonts.
Taming Advanced CSS Selectors
The best way to avoid plagues spreading in your markup and keep it clean and semantic, is by using more complex CSS selectors, ones that can target specific elements without the need of a class or an id, and by doing that keep our code and our stylesheets flexible.
A Look at Some of the New Selectors Introduced in CSS3
Here is a run-down of just some of the things that is possible with CSS3 selectors. Of course, CSS3 isn’t supported at all by any IE browsers including IE8; but all latest versions of Safari, Firefox and Opera support most, if not all of them.
Deal-breaker problems with CSS3 multi-columns
“I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.”
Correcting Orphans with Overflow
“The overflow property in CSS can be used in various ways and comes in handy when correcting bugs. Below are some tutorials that demonstrate how to clear up some common issues using the overflow property.”
CSS Sprites without Using Background Images
” The first approach in my mind was to do the typical CSS Sprites but this requires CSS work which my client did not know much of. I wanted to give him the access to update his affiliate banners using WordPress, and the simplest thing was to let him just upload his own images and put the URL in a custom field. No CSS tweaks involved, just what he needed.”
Center Multiple DIVs with CSS
At some point, you may have a situation where you want to center multiple elements (maybe <div> elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center.
Different Stylesheets for Differently Sized Browser Windows
Otherwise known as “resolution dependent layouts”. Single website, different CSS files for rearranging a website to take advantage of the size available. There is a W3C standard way of declaring them.
The New Clearfix Method
The clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. The original clearfix hack works great, but the browsers that it targets are either obsolete or well on their way.
Preload Images with CSS, JavaScript, or Ajax
“Preloading images definitely helps users without broadband enjoy a better experience when viewing your content. In this article, we’ll explore three different preloading techniques to enhance the performance and usability of your site.”
How to Center an Absolutely Positioned Element Using CSS
“Centering an absolutely positioned element is a CSS challenge that occurs now and then. The solutions seem obvious once I’ve done it, but I still find myself googling the problem every few months.”
Wrapping Long URLs and Text Content with CSS
To wrap long URLs, strings of text, and other content, just apply this carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags).
Unconventional: CSS3 Link Checking
An interesting solution of finding empty links on a web page. Only CSS3 in use.
Getting Buggy CSS Selectors to Work Cross-Browser via jQuery
Although the lack of cross-browser CSS selector support has caused a number of useful CSS selectors to go almost unnoticed, developers can still manipulate styles on their pages using some of these little-used selectors through jQuery.
“Checkmark” Your Visited Links with Pure CSS
The goal of this tutorial is to get a check mark preceding visited links for a nice visual indicator. The article will be targeting the a:visited pseudo class, but it also includes information on the other anchor pseudo classes.
Reorganize visited links with CSS3 flexible box model
An interesting technique that uses flexible box model (box, box-flex, box-ordinal-group), generated content (:before, :after) and :not and :first-of-type selectors to reorganize visited links on the page.
Vertical Centering
Vertical centering with CSS seems to be a large obsticle in the Web design world and I notice a lot of people favor <table>-based layouts when the need for vertical center arises. That’s too bad. Whilst CSS vertical center can get [very] complicated at times, I believe that learning various techniques for archiving it is beneficial and once you get a hang of it, you’ll do it just as anything else with CSS.
Robust Vertical Text Layout
Few formatting systems today can handle vertical text layout, and most of those only lay out text in right-to-left columns. This document outlines a system that can not only handle common scripts in vertical right-to-left columns, but that can gracefully accept uncommon script combinations and left-to-right text columns. The model is described here as a CSS system, but the concepts can apply to non-CSS systems as well.
iPad Orientation CSS
For the most part, Mobile Safari on the iPad is the same as that on the iPhone. One difference is that Webkit on the iPad honors CSS media query declarations based on orientation.
How to keep footers at the bottom of the page
When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it’s not immediately obvious how this can be done.
Sexy CSS Buttons
CSS is getting quite powerful these days. It can even take the place of images in many ways, giving you a more flexible design and fewer files to work with. Imagine being able to make an ultra sexy button with just CSS, giving you complete control through code. Well, you can! And it’s not too difficult, really.
CSS Image Maps: A Beginner’s Guide
While they may not be used as often as they once were in the heyday of table based web design, image maps can still be quite useful in situations that call for it. Unfortunately, for beginners, achieving this with CSS alone, can be a difficult concept to grasp. In this tutorial, we’re not only going to get you up to speed on how to create a CSS image map, but, we’re also going to take it a couple steps further and add hover states to our image map using a CSS background image sprite, as well as a “tooltip” like popup.
Make All Links Feel Subtly More Button-Like
On this current design of CSS-Tricks, you may have noticed how all links bump themselves down one pixel as you click them. This tutorial displays how to implement this technique.
Footnotes
“I figured that it would be a good idea to show the content of a footnote as soon as you indicate that you are interested in the footnote. Namely, when you move the cursor over the footnote symbol. This allows footnotes to work on devices that don’t support mouse hovering, because you can still jump to a footnote via its link, but it removes the necessity of having to click on a footnote link for most people.”
Progressive enhancement: pure CSS speech bubbles
Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.
IE CSS Bugs That’ll Get You Every Time
A comprehensive guide for developers hunting for solutions to take care of the nasty Internet Explorer bugs.
Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
Only if you must: an extensive article featuring common problems, issue and solutions for dealing with Internet Explorer 6.
CSS deployment: combine CSS files into a master file
A handy PHP script which reads a directory with css files and combines them automatically into one master stylesheet. No matter how many files you add while developing, before launch you can use a build script that merges them all so you can save HTTP requests.
CSS efficiency tip: use a single stylesheet file for multiple media
The way most people link CSS intended for different media types, such as screen, print, or handheld, is to use multiple files. The files are then linked either through link elements with a media attribute or through @import statements with one or more media types specified.
Efficiently Rendering CSS
How efficient is the CSS that we write, in terms of how quickly the browser can render it? This is definitely something that browser vendors care about (the faster pages load the happier people are using their products). Let’s cover some of the big ideas they present, and then discuss the practicalities of it all.
JSCSSP, a CSS parser in JavaScript
JSCSSP is a CSS parser written in cross-browser JavaScript. It parses a string containing CSS styles and outputs a CSS Object Model (warning: not the CSS Object Model). It can preserve some comments, at-rules and style rules that your browser does not recognize and trashes, and even whitespaces if you absolutely need to preserve indentation and blank lines. It’s very simple to use and manipulate, and can be used to write a CSS validator, filters or even CSS extensions for a given browser.
CSSDesk: A CSS Playground
A playground where you put in HTML and CSS, and see a live preview (via Ajaxian).
CSS Buttons is the Plug and Play Solution for Web Designers and Developers
CSS Buttons will allow designers to quickly implement consistently looking, cross-browser, buttons regardless of the element used. CSS Buttons is a plug n’ play solution for Multilingual, CMS, Blogs, and similar web sites faced with dynamic content challenges.
Website Colors Finder
This neat little tool extracts any color information, no matter if inline CSS, CSS files via import or link, and even if you have a master CSS file with references to other css files – mooColorFinder reads it out.
CSS Inliner Tool
If you’ve ever sent an email campaign, you know that if your CSS is not coded inline, it is likely to get stripped out by email clients, which can make your email design pretty funky looking. Writing CSS inline can be time consuming, and repetitive. MailChimp has a CSS inline conversion tool built right in that will automatically transform all of your local styles into inline styles.
HTML5/CSS3 Framework
CSS3 is one of the coolest thing in the web designer world and has been a long time coming. With CSS3 you can save time designing and slicing fancy layouts. CSS3 has features like text/box shadow, rounded corners,and animations. These just a few of the many CSS3 features has to offer you.
CSS3 Generator
This online tool generates cross-browser CSS3 snippets that you can use right away on your website. You can also preview the code in a sandbox.
CSS 3, Please!
Another generator and tester of CSS3 rules on the fly.
CSS Linear Gradients Generator
This little helper generates the code for CSS3 linear gradients online. Handy.
minify
Minify is a PHP5 app that helps you follow several of Yahoo!’s Rules for High Performance Web Sites. It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.
Rendera
Rendera makes learning HTML5 and CSS3 easy. Type in your HTML and CSS to see it rendered. Each time you press the Enter key, the live preview will update. Some examples are already provided.
HTML5 and CSS3 Web App Prototyping
Web developers often tweak style according to the device (desktop, tablet, mobile) in use. ProtoFluid makes intial tweaking much quicker.ProtoFluid requires a freshly updated, standards compliant, modern browser.
HTML5 Readiness
An interactive table featuring the support of HTML5 and CSS3 in browsers.
CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)
Smashing Magazine’s cheat sheets that will help you quickly look up the right CSS 2.1-property or an obscure CSS 3 property. The style sheets contain most important properties, explanations and keywords for each property. The help sheets were created by GoSquared and released for Smashing Magazine and its readers.
Which email clients support CSS3?
“In this update to our existing guide to CSS support, we tested both widely implemented and experimental CSS3 properties across 24 popular desktop, web and mobile email clients. The results were mixed, but certainly surprising! If you’re planning to introduce CSS3 to email campaigns, read on: we’ve not only got a summary of which email clients display what properties, but observations and hand-picked recommendations for the style-savvy email designer.” Also check Guide to CSS support in email clients.
Brosho Plugin: Design from built-in element selector and CSS editor
With this Brosho Plugin you can design your markup in the browser. It is a jQuery Plugin designs with the help of a build-in element selector and CSS editor. The CSS code of the altered elements can be generated with just one click. This can be further used in your own stylesheet.
When can I use…
Compatibility tables for features in HTML5, CSS3, SVG and other web standards.
PrimerCSS
Primer undercoats your CSS by pulling out all of your classes and ID’s and placing them into a starter stylesheet. Paste your HTML in to get started.
CSS Infos
A comprehensive reference table for all 243 CSS properties. Also, the page contains a full list of CSS properties supported by Safari and Firefox.
CSS font stacks
A quick presentation on Font stacks including a basic explanation and a step-by-step example.
CSS Reset, a simpler option
A quick presentation on CSS Reset including a basic explanation, an outline of some of the advantages and disadvantages, as well as a simpler reset option.
Webble
Webble is fun. It was written using HTML, JavaScript and CSS and does not make use of the HTML5 canvas element. The goal of Webble is to make horizontal or vertical lines of three or more tiles.
50 Useful Tools and Generators for Easy CSS Development
The tools have been sorted into the following categories: Grid and Layout, CSS Optimisers, CSS Menus Tools, CSS Buttons, CSS Rounded Corners, CSS Frames, CSS Sprites, CSS Tables, CSS Typography and CSS Forms.
50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)
We are permanently looking to collect such articles for our posts so that we can deliver the most useful and relevant content to our readers. In this post, we present an overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.
© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, css3
POSTED IN Blog | Comments Off
I say brave because we've increasingly moved away from the position that humans are somehow knowable in an absolute way, even within a particular time, place and culture, let alone universally. The certainties of the early psychologists have evolved to embrace a more nuanced approach to what it is to be human, thank goodness. Even such a long-accepted master in the art of defining the essence of humanity, Sigmund Freud, has in recent years begun to be re-evaluated as more properly positioned in the philosophical tradition, rather than that of a scientist who "discovered" fundamental, universal truths about human nature.
This is the central thesis of the recent work of French author Michel Onfray, The Twilight of an Idol (not yet available in English), who convincingly demonstrates that Freud's "universal" principles of psychoanalysis, which still so entangle Western thinking about human nature, not only were drawn from his personal experiences but actually serve only to explain his own impressively large litany of quirks. This impulse to see the universal in the personal, the all-compassing in the tiny sample, is of course not confined to psychoanalysis, or even the sciences, but can be found within practically all disciplines.
If I sound a note of caution about the central thesis of this book, it's simply to temper the faith placed in "experts" by the original author and those who participated in the revised edition. The latter state that: "The concepts in this book, broadly referred to as 'principles,' consist of laws, guidelines, human biases, and general design considerations. The principles were selected from a variety of design disciples based on several factors, including utility, degree of misuse or misunderstanding, and strength of supporting evidence." The two last words are really the key to whether what's presented is simply mildly interesting speculation or well-grounded assertion on which you can confidently take action.
So it's up to you to follow up on the citations and decide for yourself whether high ceilings promote creativity, while low ones promote concrete and detail-oriented thinking (Cathedral Effect). Or if anthropomorphic forms are appealing when they are dissimilar or identical to humans, but unappealing when they are very similar to humans (Uncanny Valley). Plausible enough. Could be. But how about a tendency to perceive women wearing red as more attractive and men wearing red as more dominant (Red Effect)? I forwarded that item to Lady Gaga for comment.
So while blind faith in the "universality" of the 125 principles is perhaps unwise, they nevertheless add up to an interesting read and can serve as the introduction to new lines of thought, which is always a good thing. Although I wish they'd updated more of the example imagery: employing a screen shot of the pre-OS X Mac interface is a trip down memory lane, as is showing signup CDs for AOL. Some things are best left forgotten.
You can decide for yourself by checking out an extract of the Universal Principles of Design on Graphics.com, which includes the Baby-Face Bias (shown above), Biophilia Effect, Cathedral Effect and Chunking principles.
Chris Dickman
Graphics.com
POSTED IN Blog | Comments Off
|
One of the most influential factors in our buying decisions is the opinions of our friends and relatives. Likewise, a large majority of online shoppers now trust what other customers say about the products they buy more than the e-tailers themselves. The reason is that we trust people who are “on our side,” even if we do not know them personally.
This attitude was described as the “Amazon effect” by Joshua Porter in his book Designing for the Social Web. He observed during his tests that people always started shopping on Amazon first. Their main reason was not that Amazon was better or that they had an Amazon account; they simply knew that on Amazon they could always find trustworthy information provided by people like them. They wanted to know the “truth,” not an idealistic vision of the product decorated by marketing cliches.
Amazon’s verified purchase tag increases the trustworthiness of a review.
Google search results show ratings.
[Offtopic: by the way, have you ever visited Smashing Magazine's List of tags? There might be something interesting for you.]
User feedback like Amazon’s could prove to be a valuable service for your customers and could trigger several positive effects. It doesn’t really matter how much information you present about your product, it will still be biased by its nature. Reviews with personal stories and remarks from people who just had an experience with your product, though, can elicit trust in a way that a simple product info page could never do. Detailed information about the reviewer creates a personality (and obviously a realistic story about the product) with whom we can identify. Good stories are easier to understand and remember. They show us how a product works in the real world and with real usage. They also provide a sense of objectivity and authenticity to potential customers.
First of all, reviews and ratings generate conversions as in the case of Hayneedle (formerly Netshops), which increased its sales by 26% after displaying user feedback. This percentage could be even higher, according to PowerReviews. While the fear that negative feedback might harm sales is not entirely unfounded, do not be too concerned, because reviewers are twice as likely to write positive reviews than negative ones. Even if you lose some sales of your mediocre products, you’ll win in the end because you will have sold many more of your superior ones.
Moreover, negative reviews are not all that bad. As John McAteer, Google’s retail industry director, says, “No one trusts all positive reviews.” In the absence of negative reviews, visitors will assume that all of your reviews are fake. No service or product is perfect. Potential customers want to know what could go wrong with it. But if they cannot sympathize with a negative reviewer, they may be inclined to purchase your product. (Also, see also further reasons.)
People sometimes want to read only negative reviews because they already have a positive impression of a product and want to know about disadvantages (intentionally or unintentionally) not mentioned by the provider. An unfair negative review could entice people to write positive reviews to mitigate the negative one and defend their favorite.
A review on Hammocks.com (a sub-site of Hayneedle).
Getting quality feedback could help you cut back on the number of products returned, and you might want to think about eliminating products that have gotten low ratings and focus instead on popular ones. Customer contributions could keep product pages fresh, which is important to young shoppers, who seek out social content and customer ratings. Users tend to have less trust in outdated reviews. Perhaps a product has been improved but is not reflected in the post. Or vice versa: perhaps a newer version of the product introduced some new bugs which haven’t been discovered yet.
An online shop with fresh BlackBerry reviews. The page would be even better if newer content appeared at the top.
Content and good keywords could help your search engine optimization efforts as well. To allow Google to find everything in one place, present all comments and reviews on one single page — very much like Amazon does it. Also, keep in mind that in most cases people do not mind scrolling, whereas clicking and waiting for content to load can be irritating.
User-generated content has some further risks, too: for instance, competitors could invade your website to plant fake reviews. To avoid this, moderate the review section and invite users to report any concern they have with a review. Moderating reviews is a powerful tool, but you need to make sure that you use it responsibly. If you are not careful, you could develop the habit of deleting reviews that actually do serve your business. Moderate only those reviews that state untruthful things or that are abusive or do not contain any helpful information. Otherwise, simply adding your opinion to a comment is better.
Be transparent, open-minded and authentic: reply to the negative comment and explain why in your opinion it is wrong or what other features of the product or service could mitigate the negative experience the user had. In fact, if your comment is meaningful and helpful, you may be able to win loyal customers by providing them with alternative options that are perfectly tailored to their interests. If you have a substantial group of enthusiastic reviewers, the good reviews and positive effects will drown out the negative reviews.
In the following sections, we’ll analyze how you can make it easy for users to give quality feedback and share it with other visitors. We’ll focus on ratings, reviews, the interaction facilitated by them, as well as some aspects of sharing. Obviously, there are many other ways to involve users (and we may get to them in one of the following articles), but mastering these will boost your business.
These recommendations mainly concern usability. Obviously, they alone won’t get people to immediately start writing many reviews and rate your products. Use offline and online marketing techniques to get all cylinders firing, and then build on whatever momentum you generate. Contact buyers after a sale to get their input. Use coupons, incentives, contests, prizes and email campaigns to motivate them. Implementing these techniques is a must if your target audience is not already passionate about your product.
Collecting ratings is a quick and dirty way to collect valuable product information from users. Ratings can be given in a second, and so they do not interrupt the user’s main activity and (usually) do not require them to log in. While ratings are a simple tool, make sure they are simple and straightforward: even tiny deviations from conventions can affect their usefulness.
For maximum effectiveness, it seems reasonable to use simple metaphors such as stars for ratings (1 — 5) and thumbs up / thumbs down for voting (vote up, vote down). A website with loyal or tech-savvy users might try to add value or humor by using symbols other than stars or hands, but sometimes it’s just not worth getting creative. A particularly educated or expert audience might appreciate 10 stars. It is probably not a good idea to use an unusual number of stars, like seven, which will rather confuse most people.
Enable people to rate with one click, and light up empty stars (or whatever your symbol is) on mouse-over to suggest that the area is clickable. Even if the function of ratings is quite obvious, help out visitors with description of each level, like “Perfect,” “Good” and “Miserable.”
ibeatyou has unique rating symbols and contains text descriptions.
Ask users to rate using a very direct, precise language: nothing can beat the good old “rate the product” wording which is as clear as it can get. Communicate clearly what users are being asked to rate: depending on the current context, it may be not clear if you are asking to rate a brand, a product or customer service. And make sure that rating labels are unambiguous for novice users, too. Even if users understand the rating system, they may not know whether the ratings have been given by customers, the website owner, the manufacturer or independent experts.
When users have clicked on a rating, clearly show the results, for instance using a different color like RYZ does, which clarifies that their vote has been accounted for and prevents them from voting again.
RYZ clearly displays ratings using various colors.
Shopzilla uses custom but easily understandable icons.
Indicate the number of votes each rating has received, because one five-star rating from an enthusiastic user isn’t comparable with a hundred five-star ratings from different customers. The relevance of the voting depends on the number of votes given to the product. It may be a good idea to show every rating tally in a small table, as iTunes does, because slight variations could reinforce the belief among users that the opinions of customers are balanced.
Amazon displays detailed ratings right in the listing.
Always show ratings in sections where you actually display the main description of the product, and allow users to order and filter by rating on the search result pages. Position the ratings beside or close to the product name to enable quick scanning. The information is key, so let users find it easily.
Ratings appear near product names on Argos. The “Customer top rated” tab is an easy way to see what’s popular.
It is cruical to make the process of adding review as easy as possible. Users will not be very motivated to contribute anything at the beginning, so allow them to write a review simply by hitting a ‘write a review’-button located close to the ratings at the top of the page. If your product has variations or versions, indicate which one they’re reviewing.
You could ask customers to write reviews by e-mailing them, but be careful with timing. Customers may need time to form an opinion about your product. With an electronic device, they may know whether they like it within days. With a book, they may need weeks or months. In the latter case, asking for a review after a week could only annoy the buyer who will be very likely to block or ignore your e-mails in the future.
The “Write a review” link on Barnes & Noble.
Amazon’s simple review interface.
While the quality of reviews is crucial, you might want to invite users to choose from a predefined list of pros and cons, allowing them to suggest additional ones, which become visible after you moderate them. Letting users set their profile — such as by indicating whether they are a “heavy user,” “occasional user,” etc. — and explaining how to use a product best could give customers some useful hints. Your reviewers will probably not be professional writers; give them hints and tips on how to write a good review, even showing examples if possible.
iTunes shows tips to reviewers.
Defining pros and cons on Compact Appliance.
Users should be able to preview their own review before submitting it. Let the users correct mistakes and information that they provided. What sounded harsh in the beginning, may have turned out to be a minor issue in the end, compared with all advantages a certain product has given the customer in the end. Also, don’t forget to mention how and when the review will be process and published. Will it be moderated or will it appear right away? Provide users with a genuine estimate, not vague terms.
Compact Appliance asks for additional information from the reviewer. Requring too much is not a very good approach, but potential customers will be able to get a better understanding of the reviewer, his environment, location and interests.
Being optimistic, you are probably prepared to receive dozens of reviews on your page, so making them easily scannable is crucial. Ratings can be displayed in a number of ways: apart from an overall overview of ratings, featuring an average score, the number of votes and their distribution, you also need to clearly display single ratings and reviews. The latter should display not only a review itself, but also maybe a summary or an excerpt, date of the review and as much information about the reviewer as possible.
The truth is that potential customers need to be able to connect with the person who provided the review; an anonymous review may be helpful but it is not trustworthy. Once we connect a review of the person with his personal activities, his work or his professional information, the information suddently seems much more reliable and trustworthy.
The well-structured review on Yahoo Shopping.
Display the author’s name as a link and the most important information about them, such as location, rank and type of user. By clicking on the link and scanning their other reviews, users can evaluate the reviewer’s trustworthiness. You might also want to reward active reviewers. Give them a separate sub-page where they can introduce themselves and show all of their reviews at once. You could also display a list of top reviewers in the sidebar. Providing bonuses or discounts for most active users is a bit tricky as it may influence their objectivity in the reviews and have biased reviews as a result. And people are damn good at detecting bias and losing confidence in a company.
A introduction of a reviewer on Rate it all
Getting in touch with Rate it all reviewers is easy. They are real indeed.
Comet displays the reviewer’s name and location, which may help users evaluate the usefulness of their opinion.
It is important to communicate to the customer the opinion of other customers about a review. If many users find the review useful, reply to it or sympathize with it in any possible way, the user will gain trust about the authenticity and objectiveness of the review and of the reviewer. Display how many people found the review useful and also how many didn’t find it useful. You can even sort your review by their “usefulness ratio”. Offer users a possibility to reply, report a concern or answer the “was this useful?” question at the bottom of the review.
Compact Appliance makes helpfulness information visible but doesn’t overemphasize it.
Amazon has tiny buttons to gain feedback about the reviews.
Being able to sort and filter reviews enables the quick scan of reviews. The most obvious options to offer for sorting are helpfulness and rating. But there are many more options, like the type of user and date, such as in the case of Buzzillions.
Buzzillions offers several ways to sort and filter. Key information — such as pros, cons, best uses and bottom line — catch the eye.
Another example by Buzzillions uses information provided by the customer to display the most popular products.
Rotten Tomatoes uses percentage points to measure quality.
A complex but well-designed rating interface on Gamespot
Reciprocity is a most important concept related to social interaction. People who read reviews are often tempted to react to them. They may think that getting this valuable information for free obliges them to give something back to the community. Whether a review or feedback to the reviewer, and whether small or big, it does not matter. Enabling feedback on reviews could minimize the effect of rants or unfair reviews that people feel the need to rate down or comment on.
Voting on reviews could enhance the quality and trustworthiness of reviews. You could present reviews that are ranked highest for usefulness at the top. Voting provides feedback to reviewers and encourages reviewers to engage in healthy competition for reputation and the attention of visitors. The tool is most frequently used by people who are not customers as a way to express their opinion. Allowing them to vote encourages them to get involved.
Rate it all allows users to comment and send detailed yet simple feedback using the “Helpful,” “Funny,” “Agree,” and “Disagree” buttons.
Commenting on reviews brings real interaction and adds genuine value to the reviews in most cases. People can use them to give quality feedback to reviewers, correct mistakes, recommend other products, link to useful pages or write full reviews about related products. Rather than delete negative reviews, you could use comments as an honest way to respond to criticism of your products.
Comment threads for reviews can be transformed into real conversations that explore the pros and cons of the product in a much more interesting and natural way. Use indentation to display replies, or show them in a simple sequence with a “Respond to this” link.
Making it easy for users to keep your product pages alive is a crucial aspect of an e-commerce website. Your environment should be inviting enough to involve your loyal customers as well as unhappy customers to submit their reviews. Negative reviews can be as useful as positive ones, or even more helpful. In particular, if you respond to reviews, addressing issues and suggesting solutions, you can easily turn a negative comment in a positive one. And if your loyal customers support you, you gain an opportunity to elicit trust for customers that would probably dismiss your product page with perfect 5-star reviews. Once you have started with reviews, you could create a question and answer section, a tagging system, video reviews, marks for favorite content, product discussion forums and so on.
When you implement ratings and reviews, focusing on communication is critical. A visually adequate presentation is crucial to digesting this information. Apply patterns that best match the user’s mental process of digesting this information.
Ratings can stand on their own but could also be combined with reviews. Empty review sections and complicated forms will be significant barriers to success. Involve yourself in the communication threads and answer questions. Use social networking at the beginning, but support it with the authentic, genuine communication methods. When your system works as planned, focus on the reviewers; make your website a pleasant and encouraging place where users feel free to express their opinions.
(al)
© Rung András for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: conversion, e-commerce, usability
POSTED IN Blog | Comments Off
|
It is arguable that there is no goal in web design more satisfying than getting a beautiful and intuitive design to look exactly the same in every currently-used browser. Unfortunately, that goal is generally agreed to be almost impossible to attain. Some have even gone on record as stating that perfect, cross-browser compatibility is not necessary.
While I agree that creating a consistent experience for every user in every browser (putting aside mobile platforms for the moment) is never going to happen for every project, I believe a near-exact cross-browser experience is attainable in many cases. As developers, our goal should not just be to get it working in every browser; our goal should be to get it working in every browser with a minimal amount of code, allowing future website maintenance to run smoothly.
In this article, I’ll be describing what I believe are some of the most important CSS principles and tips that can help both new and experienced front-end developers achieve as close to a consistent cross-browser experience as possible, with as little CSS code as possible.
[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]
This is one of the first things you should be thoroughly familiar with if you want to be able to achieve cross-browser layouts with very few hacks and workarounds. Fortunately, the box model is not a difficult thing to grasp, and generally works the same in all browsers, except in circumstances related to certain versions of Internet Explorer (more on this later).
The CSS box model is responsible for calculating:
The CSS box model has the following basic rules:
Some important things to keep in mind for dealing with block-level elements:
The box model as its displayed using Firebug in Firefox
For experienced developers, this is another no-brainer. It is, however, another crucial area that, when fully understood, will cause the light bulb to appear, many headaches will be avoided, and you’ll feel much more confident in creating cross-browser layouts.
The image below illustrates the difference between block and inline elements:
Here are some basic rules that differentiate block elements from inline:
white-space, font-size, and letter-spacingvertical-align property, but block elements cannotFor multi-column layouts that are relatively easy to maintain, the best method is to use floats. Having a solid understanding of how floats work is, therefore, another important factor in achieving a cross-browser experience.
A floated element can be floated either left or right, with the result that the floated element will shift in the specified direction until it reaches the edge of its parent container, or the edge of another floated element. All non-floated, inline content that appears below the floated element will flow along the side of the element that is opposite to the float direction.
Here are some important things to keep in mind when floating and clearing elements:
Please note that Smashing Magazine’s team strongly advises against developing websites in Internet Explorer first. In our opinion, sites should be developed in “modern” web-browsers, with standards first and then be tweaked for buggy versions of Internet Explorer. The advice below does not reflect the opinion of the Smashing Editorial team. Agree or disagree? Comment on this article!
Most of what I’ve discussed so far has to do with CSS coding and layout principles. This principle is more related to habits and preferences of most designers. Although we might hate to use IE6 and IE7 in our everyday internet activities, when it comes time to build a client project from scratch, one of the best things you can do is test your layout in those browsers early in development. You might even want to open up a standalone version of IE6 or IE7 and just start your development in that browser.
Of course, you won’t have access to tools like Firebug, but generally for CSS (especially early in development) you won’t need Firebug. It’s much easier to get a layout working first in IE6 and IE7, then fix for other browsers, than to do it the other way around. Waiting until late in the development process to open up IE6 and/or IE7 will likely cause some, if not all, of the following problems:
I wouldn’t expect developers to use Internet Explorer this aggressively for personal projects, web apps, or other non-client work. But for corporate clients whose user base is primarily on Internet Explorer, this tip could prevent a lot of headaches while getting things to work properly, and will definitely make a cross-browser experience much more likely.
Sometimes viewing IE’s problems as “annoying bugs” can create unnecessary negativity, and can hinder development time and future maintenance. Dealing with IE is a fact of life for designers and developers, so just view its problems as you would any CSS issue — and build from there.
If you’re going to start with IE in your development, or at the very least check your layout in IE early on, then you should understand what things Internet Explorer (usually versions 6 & 7) has problems with, or what its limitations are.
A detailed discussion of every possible problem that can occur in Internet Explorer, and a list of all of its CSS compatibility issues is certainly beyond this article. But there are some fairly significant inconsistencies and issues that come up in relation to IE that all CSS developers should be aware of. Here is a rundown of the most common problems you’ll need to deal with:
display: inline will often fix thismin-height, or max-widthdisplay property (e.g. inline-table, table-cell, table-row, etc.):hover pseudo-class on any element in IE6 except an anchor (<a>)There are many more bugs, issues, and inconsistencies that can arise in Internet Explorer, but these are probably the most common and most important ones to keep in mind when trying to create a cross-browser experience. I encourage all developers to do further research on many of the issues I’ve mentioned above in order to have a more accurate understanding of what problems these issues can cause, and how to handle them.
As already mentioned, creating the exact same experience visually and functionally in every browser is possible, but unlikely. You can get the layout and positioning of elements close to pixel-perfect, but there are some things that are out of the developer’s control.
Discussing all the differences and quirks that occur with form elements across the different browsers and platforms could be an article in itself, so I won’t go into extensive details here. A simple visual demonstration, however, should suffice to get the point across.
Take a look at the image below, which displays the <select> elements on the Facebook home page, as shown in 5 different browser versions (screenshots taken from Adobe’s Browserlab):
<select> elements appear differently in different browsers
Some form elements can be controlled visually. For example, if the client requires that the submit button looks the same in every browser, that’s no problem, you can just use an image, instead of the default <input type="submit">, which, similar to <select> elements, will look different in different browsers.
But other form elements, like radio buttons, textarea fields, and the aforementioned <select> elements, are impossible to style in a cross-browser fashion without complicating matters using JavaScript plugins (which some developers feel harm the user experience).
Another area in which we can’t expect pixel-perfect designs is with regards to fonts, particularly fonts on body copy. Different methods have sprung up to help with custom fonts in headers, and the recently launched Google Font API will contribute to this. But body copy will probably always look different in different browsers.
With typography, we not only face the problem of font availability on different machines, but in some cases even when the font is available on two different machines, the type will look different. Windows ClearType, for example, is available on IE7, but not on IE6, causing the same font to look different on two different versions of IE.
The graphic below displays screenshots from A List Apart on IE6 and IE7. The grainy text in IE6 is more evident on the heading than in the body copy, but all text displays a marked difference between the two browsers (unless of course the text is an image):
A List Apart’s typography compared in IE6 and IE7
Ever since I started using a CSS reset for my projects, my ability to create a cross-browser experience has greatly increased. It’s true that most resets will add unnecessary code to your CSS, but you can always go through and remove any selectors that you know will not be a factor (for example, if you don’t plan to use the <blockquote> tag, then you can remove reference to it, and repeat this for any other unused tags).
Many of the margin- and padding-related differences that occur across different browsers become more normalized (even in troublesome HTML forms) when a CSS reset is implemented. Because the reset causes all elements to start from a zero base, you gain more control over the spacing and alignment of elements because all browsers will begin from the same basic settings.
A CSS reset as shown in Firefox’s developer toolbar
Besides the benefits of producing a cross-browser experience, a reset will also be beneficial because you won’t use as many hacks, your code will be less bloated, and you’ll be much more likely to create maintainable code. I recommend Eric Meyer’s CSS reset, which I’ve been using for quite some time now.
If you’re having trouble getting a particular CSS property to display correctly across all browsers, look up the property in the SitePoint CSS Reference to see if it has any compatibility limitations. SitePoint’s reference (which is also available as a hard copy (though not as up to date), includes a useful compatibility chart that displays browser support for every standard CSS property.
SitePoint’s Compatibility Charts for CSS Properties
Each compatibility chart is accompanied by a fairly detailed description of the bugs that occur in different browsers, and users are permitted to add comments to document new bugs that come up and to provide further explanations on complex CSS issues.
Using this as a guide, you can narrow down the possibilities, and can usually determine whether or not a CSS issue is due to a browser bug, or due to your own misapplication or misunderstanding of the CSS property in question.
While there is so much more that could be discussed on the topic of cross-browser CSS, the principles and guidelines I’ve introduced here should provide a foundation to assist CSS developers in creating as close to a consistent cross-browser experience as is currently possible. Cross-browser CSS is an attainable goal, within reasonable limits.
But, as an epilogue to this article, I also would like to concur with those promoting the use of CSS3 with progressive enhancement, and encourage developers to push new CSS techniques to the limits, even doing so, where possible, on client projects.
The principles I’ve introduced here should help developers create a beautiful and intuitive experience in IE, while providing an extra-beautiful and super-intuitive experience in the more up-to-date browsers. That’s a cross-browser goal that is definitely worth striving for.
© Louis Lazaris for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS
