Posts tagged css

An Introduction To Object Oriented CSS (OOCSS)

5 months ago

by Louis Lazaris in Network Posts

Have you ever heard the phrase “Content is King”? Being a Web developer, and therefore having a job that’s often linked to content creation, it’s likely you have. It’s a fairly overused but true statement about what draws visitors to a site.

From a Web developer’s perspective, however, some may argue that speed is king. More and more, I’m starting to favour that stance. In recent years many experienced front-end engineers have offered their suggestions on how we can improve the user experience by means of some performance best practices.

Unfortunately, CSS seems to get somewhat overlooked in this area while many developers (for good reason) focus largely on JavaScript performance and other areas.

In this post, I’ll deal with this often overlooked area by introducing you to the concept of object oriented CSS and how it can help improve both the performance and maintainability of your Web pages.

The Principles Of OOCSS

As with any object-based coding method, the purpose of OOCSS is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain.

As described on the OOCSS GitHub repo’s Wiki page, OOCSS is based on two main principles.

Separation of Structure From Skin

Almost every element on a styled Web page has different visual features (i.e. “skins”) that are repeated in different contexts. Think of a website’s branding — the colors, subtle uses of gradients, or visible borders. On the other hand, other generally invisible features (i.e. “structure”) are likewise repeated.

When these different features are abstracted into class-based modules, they become reusable and can be applied to any element and have the same basic result. Let’s compare some before and after code so you can see what I’m talking about.

Before applying OOCSS principles, you might have CSS that looks like this:

#button {
	width: 200px;
	height: 50px;
	padding: 10px;
	border: solid 1px #ccc;
	background: linear-gradient(#ccc, #222);
	box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#box {
	width: 400px;
	overflow: hidden;
	border: solid 1px #ccc;
	background: linear-gradient(#ccc, #222);
	box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#widget {
	width: 500px;
	min-height: 200px;
	overflow: auto;
	border: solid 1px #ccc;
	background: linear-gradient(#ccc, #222);
	box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

The three elements above have styles that are unique to each, and they’re applied with the non-reusable ID selector to define the styles. But they also have a number of styles in common. The common styles might exist for branding purposes or consistency of design.

With a little bit of planning and forethought, we can abstract the common styles so the CSS would end up instead like this:

.button {
	width: 200px;
	height: 50px;
}

.box {
	width: 400px;
	overflow: hidden;
}

.widget {
	width: 500px;
	min-height: 200px;
	overflow: auto;
}

.skin {
	border: solid 1px #ccc;
	background: linear-gradient(#ccc, #222);
	box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

Now all the elements are using classes, the common styles are combined into a reusable “skin” and nothing is unnecessarily repeated. We just need to apply the “skin” class to all the elements and the result will be the same as what the first example would produce, except with less code and a possiblity for further reuse.

Separation of Containers and Content

The second principle described on the OOCSS GitHub wiki page is the separation of containers from their content. To illustrate why this is important, take the following CSS:

#sidebar h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .8em;
	line-height: 1;
	color: #777;
	text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

These styles will apply to any third-level headings that are children of the #sidebar element. But what if we want to apply the exact same styles to third-level headings that appear in the footer, with the exception of a different font size and a modified text shadow?

Then we would need to do something like this:

#sidebar h3, #footer h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2em;
	line-height: 1;
	color: #777;
	text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

#footer h3 {
	font-size: 1.5em;
	text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}

Or we might end up with something worse:

#sidebar h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2em;
	line-height: 1;
	color: #777;
	text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

/* other styles here.... */

#footer h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	line-height: 1;
	color: #777;
	text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}

Now we’re unnecessarily duplicating styles, and might not realize it (or simply don’t care). With OOCSS, we’re encouraged to give more forethought to what is common among different elements, then separate those common features into modules, or objects, that can be reused anywhere.

The styles that are declared using the descendant selector in those above examples are not reusable, because they are dependent on a particular container (in this case either the sidebar or the footer).

When we use OOCSS’s class-based module building, we ensure that our styles are not dependent on any containing element. This means they can then be reused anywhere in the document, regardless of structural context.

A Real-World Example

To further illustrate how OOCSS can be used, I’ll use something similar to what I did on my site’s recent redesign. After coding the inner header element on my site, I realized that the basic structural styles for the inside of the header could be reused on other elements on the page.

So here’s something along the lines of what I had when I started styling my header:

.header-inside {
	width: 980px;
	height: 260px;
	padding: 20px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

A few of the styles listed here are unique to the .header-inside element. But the rest can form a module that I can reuse. So I can abstract the structural styles into their own reusable class. Here’s the result:

.globalwidth {
	width: 980px;
	margin: 0 auto;
	position: relative;
	padding-left: 20px;
	padding-right: 20px;
	overflow: hidden;
}

.header-inside {
	padding-top: 20px;
	padding-bottom: 20px;
	height: 260px;
}

The styles belonging to the .globalwidth class cover the following:

A fixed width
Centering using margin: auto
Relative positioning to create a positioning context for child elements
Left and right padding of 20px
Overflow set to “hidden” for clearfixing

Now we’re free to use these styles on any elements that require these same characteristics by simply adding that class to the desired element — without writing a single extra line of CSS.

For my site, I reused these structural styles on the primary content element and the inner footer element. Depending on the design, these styles could also apply to a horizontal navigation element that might appear between the header and the content, or any other element that has a fixed-width and needs to be centered on the page.

After adding the “globalwidth” styles to these elements, the markup would look something like this:

<header>
	<div class="header-inside globalwidth">
	</div>
</header>

<div class="main globalwidth">
</div>

<header>
	<div class="footer-inside globalwidth">
	</div>
</footer>

Some may feel that this type of styles abstraction clutters the HTML and goes against the principle of separating markup from presentation.

But putting aside any debates about how this might affect the markup, no one can question that this abstraction has now made it easier to track down and modify the common styles that are used to structure these three elements.

The Media Object

One of the pioneers of the OOCSS movement is Nicole Sullivan. She’s created a reusable module called the media object which, as she explains, can save hundreds of lines of code.

The media object is a great example of the power of OOCSS because it can contain a media element of any size with content to its right. Although many of the styles that apply to the content inside of it — and even the size of the media element itself — could change, the media object itself has common base styles that help avoid needless repetition.

The Benefits Of OOCSS

I’ve already alluded to some of the benefits of OOCSS. Here I’ll expand on these.

Faster Websites

The performance benefits of OOCSS should be fairly clear. If you have fewer styles that are repeated in your CSS, then this will lead to smaller file sizes and thus faster downloading of those resources.

It’s true that markup will be more cluttered and thus create larger HTML files. But in many cases the amount of loss in markup performance will be greatly surpassed by the amount of gain in stylesheet performance.

Another concept to keep in mind is something that the OOCSS wiki refers to as performance freebies. This refers to the fact that every time you reuse something in your CSS, you’re essentially creating new styled elements with zero lines of CSS code. For large, high-traffic projects, these “freebies” could be a crucial performance gain.

Maintainable Stylesheets

With OOCSS, instead of a constantly growing stylesheet full of specificity wars, you’ll have an easy to maintain set of modules where the natural cascade plays an important role.

When making additions to an existing site, you won’t be adding new styles to the bottom of your stylesheet without regard for what came before. Instead you’ll be reusing existing styles and extending your styles based on existing rule sets.

With this type of forethought, it’s possible to create entire pages while coding very little CSS. Any existing CSS modules can serve as a basis for all new pages, and any new CSS will be minimal. In some cases you might even be able to create a new fully-styled page without coding a single line of CSS.

These maintainability benefits also extend to the robustness of your stylesheets. Because the styles are modular, pages built on OOCSS will be less likely to break when a new developer starts to use the stylesheet.

Points Worth Noting

OOCSS has created a great deal of discussion in the community, raising some controversies. Here I’ll try to dispel a couple of common misconceptions.

You Can Still Use IDs

If you decide to work exclusively in an OOCSS manner, then your styles will be based largely on CSS classes, and you won’t be styling elements using the ID selector.

Because of this, many have falsely claimed that OOCSS encourages dropping the use of IDs completely. But this is not true.

The rule to avoid IDs is, more specifically, don’t use IDs in selectors. So it’s perfectly acceptable to use OOCSS principles (and thus avoid styling using the ID selector) while using IDs in your HTML for JavaScript hooks and fragment identifiers.

Of course, you may have a situation where you already have an ID applied to an element that you know is unique to the page. So, you can save a few bytes by avoiding adding a class to that element and instead style it using an ID selector. But even in this instance, it’s much safer to rely on a class to ensure you don’t run into specificity problems in the future.

Dealing With Smaller Projects

For smaller sites and apps, you could certainly make the case that OOCSS would be overkill. So don’t take this article as an advocacy for OOCSS in all circumstances — it will vary depending on the project.

Nonetheless, I think it’s a good idea, at the very least, to start thinking in terms of OOCSS in all your projects. Once you get the hang of it, I’m sure you’ll find it much easier to get it working on bigger projects where the benefits would be more noticeable and relevant.

Some Guidelines For Implementation

Getting started working with OOCSS could take time. I’m still working on it, so I don’t claim to have all the answers and experience in this area.

But here are some things you might want to start doing to help you get into an OOCSS mode of thinking:

Avoid the descendent selector (i.e. don’t use .sidebar h3)
Avoid IDs as styling hooks
Avoid attaching classes to elements in your stylesheet (i.e. don’t do div.header or h1.title)
Except in some rare cases, avoid using !important
Use CSS Lint to check your CSS (and know that it has options and method to its madness)
Use CSS grids

There will obviously be times when some of these rules will be broken, but overall, these are good habits to develop and will lead to stylesheets that are smaller and easier to maintain.

Follow Nicole Sullivan’s Work

If you want to continue learning about OOCSS, the most important person in the industry to keep up with is Nicole Sullivan.

In addition to posting articles regularly on OOCSS on her blog, Nicole has done a number of presentations with accompanying slideshows. Below are some that you might want to check out:

Object Oriented CSS (Slideshow)
High Performance Websites: Nicole Sullivan (Video)
Our Best Practices Are Killing Us (Slideshow)
CSS Bloat (Slideshow)

Conclusion

Many people fear the OOCSS ideology because it seems to go against many of the so-called “best practices” we’ve learned. But once the long-term benefits of using OOCSS are understood, I’m sure many developers will become converts.

Overall I think OOCSS has a bright future in CSS development, and it’s a concept that all developers should start incorporating into their projects — at least on some level — to help create Web pages that are faster, more efficient, and easier to maintain.

(il)

css

How To Set Up A Print Style Sheet

5 months ago

by Christian Krammer in Network Posts

In a time when everyone seems to have a tablet, which makes it possible to consume everything digitally, and the only real paper we use is bathroom tissue, it might seem odd to write about the long-forgotten habit of printing a Web page. Nevertheless, as odd as it might seem to visionaries and tablet manufacturers, we’re still far from the reality of a paperless world.

In fact, tons of paper float out of printers worldwide every day, because not everyone has a tablet yet and a computer isn’t always in reach. Moreover, many of us feel that written text is just better consumed offline. Because I love to cook, sometimes I print recipes at home, or emails and screenshots at work, even though I do so as rarely as possible out of consideration for the environment.

Print style sheets are useful and sometimes even necessary. Some readers might want to store your information locally as a well-formatted PDF to refer to the information later on, when they don’t have an Internet connection. However, print styles are often forgotten in the age of responsive Web design. The good news is that a print style sheet is actually very easy to craft: you can follow a couple of simple CSS techniques to create a good experience for readers and show them that you’ve gone the extra mile to deliver just a slightly better user experience. So, how do we start?

Getting Started

Let’s look at the process of setting up a print style sheet. The best method is to start from scratch and rely on the default style sheet of the browser, which takes care of the printed output pretty well by default. In this case, insert all declarations for printing at the end of your main style sheet, and enclose them with this distinct rule:

@media print {
   …
}

For this to work, we have to prepare two things:

Include all screen styles in the separate @media screen {…} rule;
Omit the media type for the condensed style sheet: <link rel="stylesheet" href="css/style.css"/>

In rare cases, using screen styles for printing is the way to approach the design of the print style sheet. Although making the two outputs similar in appearance would be easier this way, the solution is not optimal because screen and print are different kettles of fish. Many elements will need to be reset or styled differently so that they look normal on a sheet of paper. But the biggest constraints are the limited page width and the need for an uncluttered, clear output. Building print styles separately from screen styles is better. This is what we will do throughout this article.

Of course, you could separate the declarations for screen and print into two CSS files. Just set the media type for the screen output to media="screen" and the media type for printing to media="print", omitting it for the first one if you want to build on the screen style sheet.

To illustrate, I have set up a simple website of the fictional Smashing Winery.

Our example website.

Everything needed for a proper screen display is in place. But as soon as the environment changes from virtual pixels to real paper, the only thing that matters is the actual content.

The two pages of the unaltered print preview. The header is not yet optimal, and both the main navigation and footer are superfluous.

Therefore, as a first task, we will hide all the clutter: namely, the main navigation and footer.

header nav, footer {
display: none;
}

Depending on the type of website, you could also consider hiding images by default. If the images are big, this would be wise, to save your users some printing costs. But if the images mainly support the content, and removing them would compromise the meaning, just leave them in. Whatever you decide, limit the images to a certain width, so that they don’t bleed off the paper. I’ve found that 500 pixels is a good compromise.

img {
max-width: 500px;
}

Alternatively you could also rely on the tried and trusted max-width: 100%, which displays images at their maximum size but not bigger than the page width.

You might want to use a simple trick to get high-quality images when printing. Just provide a higher-resolution version of every image needed and resize it to the original size with CSS. Read more about this technique in the article “High-Resolution Image Printing” on A List Apart.

Of course, we should hide video and other interactive elements, because they are useless on paper. These include <video>, <audio>, <object> and <embed> elements. You might want to consider replacing each video element with an image in the print style sheet, too.

With the main navigation, footer and images gone, the actual text is getting ever closer to center stage. But work remains to be done, especially with the header.

Adjusting To The Right Size

To define page margins, you can use @page rule to simply apply a margin all the way around the page. E.g.:

@page {
margin: 0.5cm;
}

will set the page margin on all sides to 0.5cm. You can also adjust the margins for every other page. The following code sets the left page (1, 3, 5, etc.) and right page (2, 4, 6, etc.) margins independently.

@page :left {
margin: 0.5cm;
}

@page :right {
margin: 0.8cm;
}

You can also use the :first page pseudo-class that describes the styling of the first page when printing a document:

@page :first {
  margin: 1cm 2cm;
}

Unfortunately, @page is not supported in Firefox, but supported in Chrome 2.0+, IE 8.0+, Opera 6.0+ and Safari 5.0+. @page :first is supported only in IE8+ and Opera 9.2+. (thanks for the tip, Designshack)

Now let’s tweak some general settings for the fonts. Most browsers set the default to Times New Roman, because serif fonts are considered to be easier on the eyes when read on paper. We can use Georgia at 12-point font size and a slightly higher line height for better legibility.

body {
font: 12pt Georgia, "Times New Roman", Times, serif;
line-height: 1.3;
}

However, to retain some control, we should explicitly set the font sizes below. The chart on ReedDesign gives us a feel for this; but with all of the screen sizes and resolutions out there, these are only rough estimates.

h1 {
font-size: 24pt;
}

h2 {
font-size: 14pt;
margin-top: 25px;
}

aside h2 {
font-size: 18pt;
}

Apart from special cases (like the <h2> heading, which would otherwise be too close to the preceding paragraph), we don’t need to touch the margins or appearance of any elements, because they are handled quite nicely by the default settings. If you don’t like that certain elements are indented, such as <blockquote>, <ul> and <figure>, you could always reset their margins:

blockquote, ul {
margin: 0;
}

Or you could override the default bullet style in unordered lists…

ul {list-style: none}

…and replace it with a custom one; for example, a double arrow (and a blank space to give it some room):

li {
content: "» ";
}

You could also make <blockquote> stand out a bit by enlarging it and italicizing the text.

The Header

Currently, the remaining things to be dealt with in the header are the <h1> title and the logo. The first is there just for accessibility purposes and is hidden for screen display using CSS. While we could use it as a sort of header in the print-out to indicate the source of the content, let’s try something more attractive. Wouldn’t it be nice to display the actual logo, instead of the boring text?

Unfortunately, the “Winery” part of the logo is white and therefore not ideal for printing on light-colored paper. That’s why two versions of the logo are in the source code, one for screen display, one for printing. The latter image has no alt text, otherwise screen readers would repeat reading out “Smashing Winery.”

<a href="/" title="Home" class="logo">
   <img src="img/logo.png" alt="Smashing Winery" class="screen"/>
   <img src="img/logo_print.png" alt="" class="print"/>
</a>

First, we need to hide the screen logo and the <h1> heading. Depending on the relevance of the images, we might have already decided to hide them along with other unneeded elements:

header h1, header nav, footer, img {
display: none;
}

In this case, we have to bring back the print logo. Of course, you could use the adjacent sibling selector for the job (header img + img) to save the class name and live with it not working in Internet Explorer 6.

header .print {
display: block;
}

Otherwise, you could just use header .screen (or header :first-child) to hide the main logo. And then the second logo would remain. Keep in mind that in print layouts, only images embedded via the <img> tag are displayed. Background images are not.

Voilà! Now we have a nice header for our print-out that clearly shows the source of everything. Alternatively, you could still remove the second logo from the source code and use the header’s <h1> heading that we switched off earlier (in other words, remove it from the display: none line). Perhaps you’ll need to hide the remaining logo as we did before. Additionally, the font size could be enlarged so that it is clearly recognized as the title of the website.

header h1 {
font-size: 30pt;
}

As a little extra, the header in the print-out could show the URL of the website. This is done by applying the :after pseudo-element to the <header> tag, which unfortunately won’t work in IE prior to version 8; but because this is just a little bonus, we can live with IE’s shortcoming.

header:after {
content: "www.smashing-winery.com";
}

To see what else these pseudo-elements can do, read the description on the Mozilla Developer Network, or consult Chris Coyer’s excellent article on CSS-Tricks.

Another thing about IE 6 to 8 is that HTML5 tags can’t be printed. Because we’re using these tags on the example website, we’ll have to apply Remy Sharp’s HTML5shiv in the header. The shiv allows you not only to style HTML5 tags but to print them as well. If you’re already using Modernizr, that’s perfect, because the shiv is included in it.

<script src="js/html5.js"></script>

Unfortunately, the behavior of the IEs is still a bit buggy even when this shiv is applied. HTML5 tags that were styled for the screen layout need to be reset, or else the styling will be adopted for the print-out.

Some developers add a short message as a supplement (or an alternative) to the displayed URL, reminding users where they were when they printed the page and to check back for fresh content. We can do this with the :before pseudo-element, so that it appears before the logo. Again, this won’t work in IE 6 or 7.

header:before {
display: block;
content: "Thank you for printing our content at www.smashing-winery.com. Please check back soon for new offers on delicious wine from our winery.";
margin-bottom: 10px;
border: 1px solid #bbb;
padding: 3px 5px;
font-style: italic;
}

To distinguish it from the actual content, we’ve given it a gray border, a bit of padding and italics. Lastly, I’ve made it a block element, so that the border goes all around it, and given the logo a margin.

To make it more discreet, we could move this message to the bottom of the page and append it to main container of the page, which has the .content class. If so, we would use the :after element and a top margin to keep it distinct from the sidebar’s content. As far as I’m concerned, the URL is indication enough, so I would rely on that and omit the message.

Finally, we need to remove the border of the logo to prevent it from showing in legacy browsers, and move the <header> away from the content:

img {
border: 0;
}

header {
margin-bottom: 40px;
}

The header shown two different ways, one with a logo and simple URL, and the other with a message and the title in plain text.

The Missing Link

Obviously, on paper, links aren’t clickable and so are pretty useless. You could try to build a workaround, replacing links with QR codes on the fly, but the solution may not be feasible. To put the links to use, you could display the URL after each string of anchor text. But text littered with URLs can be distracting and can impair the reading experience; and sparing the reader excessive information where possible is advisable.

The best solution is the :after pseudo-element. It displays the URL after each anchor text, surrounded by brackets. And the font size is reduced to make it less intrusive.

p a:after {
content: " (" attr(href) ")";
font-size: 80%;
}

We’ve limited this technique to links within <p> elements as a precaution. To go a step further, we could choose to show only the URLs of external links. An attribute selector is perfect for this:

p a[href^="http://"]:after {
content: " (" attr(href) ")";
font-size: 90%;
}

The possibilities for links in printed documents seem to be almost endless, so let’s try some more. To distinguish all internal links, let’s precede them with the website’s domain (omitting all the other properties, to keep things concise and clear):

p a:after {
content: " (http://www.smashing-winery.com/" attr(href) ")";
}

Then, we can hide internal links (#), because there is not much to display:

p a[href^="#"]:after {
display: none;
}

Also, external links will be appended as is, like above. Let’s consider SSL-secured websites, too (i.e. ones that begin with https://):

p a[href^="http://"]:after, a[href^="https://"]:after {
content: " (" attr(href) ")";
}

But there is one thing to remember, especially with external links. Some are very long, such as the ones in the Safari Developer Library. Such links can easily break a layout, like at the screen output. Luckily, a special property takes care of this:

p a {
word-wrap: break-word;
}

This breaks long URLs when they reach a certain limit or, as in our case, when they exceed the page’s width. Just add this property to the first of the above declarations. Although this property is basically supported in a wide range of browsers — even IE 6 — it works only in Chrome when printing. While Firefox automatically breaks long URLs, Internet Explorer has no capability for this.

Finally, we set the link color to black to improve the experience for readers.

a {
color: #000;
}

URLs, whether internal or external, now show up beside links with special treatment.

Aaron Gustafson went one step further and built the little script Footnote Links. According to the description:

This script builds a list of URIs from any tags within a specified container and appends the list as footnotes to the document in a specified location. Any referenced elements are given a dynamically-assigned number which corresponds to the link in the footnote list.

Aaron’s article on A List Apart “Improving Link Display for Print” gives more insight into the idea behind this script.

While we’re at it, letting readers know where quotes come from, such as those wrapped in <blockquote> and <q> tags, would be thoughtful. Just append the cite attribute (which will be the URL) after quotation marks, like so:

q:after {
content: " (Source: " attr(cite) ")";
}

Side By Side

We haven’t yet dealt with the sidebar content. Even though it appears after the main content by default, let’s give it some special treatment. To keep it distinct, we’ll give the sidebar a gray top border and a safe buffer of 30 pixels. The last property, display: block, ensures that the border shows up properly.

aside {
border-top: 1px solid #bbb;
margin-top: 30px;
display: block;
}

To separate it even more, we could set a special print property:

page-break-before: always;

This will move the contents of the sidebar to a new page when printed. If we do this, we can omit all of the other properties.

The sidebar on screen (left) and printed out (right). I’ve grayed out everything else to make it more obvious here.

We could do the same for comments. Comments don’t appear in the example, but they’re still worth touching on. Because they sometimes run long, omitting them in the print-out might be reasonable (just set display: none for the whole container). If you do want to show the comments, at least set page-break-before. You can also use page-break-after: always if there is content to print on a new page. The page-break-before and page-break-after properties are supported in all major browsers.

We can also use widows and orphans properties. The terms derive from traditional printing, and they take numbers as values. The widows property sets the minimum number of lines in a paragraph to leave at the top of a page before moving them entirely to a new page. The orphans property sets the number of lines for the bottom of the page. The orphans and widows properties are supported in IE 8+ and Opera 9.2+, but unfortunately not in Firefox, Safari or Chrome.

Now that we have taken care of the sidebar, the print style sheet is ready! You can download it here. The file is fully documented and so can serve as a helpful reference or starting point.

The completed print style sheet.

Just For Fun

You might be asking, “Why can’t we just put the sidebar next to the main content, like on the website itself?” Well, the screen and print outputs are a bit different. Unlike the former, print-outs aren’t very wide and thus don’t have much space to fill. But depending on the font size, the line length could exceed the maximum of 75 characters and so be more difficult to read.

In this case, we could, of course, limit the width of the main content (preferably not too much — we shouldn’t set the line length to fall below about 55 characters) and then absolutely position the sidebar just below it, just like in the screen display. But describing this method falls beyond the scope of this article, so please consult the screen style sheet of the example website (line numbers 112 and 141 and down).

In my humble opinion, avoid such experiments. While in principle, print layouts have endless possibilities, focusing on the content and removing everything else is better. The better way to ensure an optimal line length is just to shrink the page’s width or enlarge the font size.

Preview Made Easy

Print Preview by Tim Connell is a handy little jQuery plugin that replicates the built-in print-preview function, but with one difference. Instead of opening a separate page, it shows a sleek overlay, with “Close” and “Print” buttons at the top. It also has the convenient “P” shortcut. You might want to check out the demo page, too.

A Missed Opportunity

Imagine that you were able to visit any page, hit “Print” and get an optimized version of the page to enjoy on paper. Unfortunately, we don’t live in this perfect world. Some websites still rely on JavaScript to generate print versions, and many other designers simply don’t care. But this is a missed opportunity. A carefully composed print style sheet could be used not only for printing but to optimize legibility for screen reading.

As the website owner, you can determine the images to display (if any), the optimal font and size, and the presentation of other elements. You could make the content more appealing than the versions produced by Instapaper and Readability by giving the print version the extra attention it deserves.

The Future

While using CSS3 for screen layouts is pretty common nowadays, it hasn’t quite established itself in the print environment yet. The W3C has an extensive description of “Paged Media,” but unfortunately support is very limited at the moment, Opera and Chrome being the only browsers that enable a few of its related properties. With decent support, it would be possible to use the @page rule to set the dimensions of the page, switch to a landscape view, alter the margins, and do much more. Even media queries are were conceived to respond to different page sizes.

Websites Designed Well For Print

Let’s take a look at some examples of websites optimized for print.

A List Apart
The slick multi-column design is simplified into a single column, full width, which intuitively mirrors the website’s sensible hierarchy. Article titles and authors are no longer active links. And beautiful clean typography is kept intact, thanks to the compatible fonts and simple colors; no font change is necessary, although the font-size value increases slightly. Advertising and affiliate styles are hidden, and the result is a simple, clean printed page that easily conforms well to any printer or page set-up in the document. A List Apart is exemplary, save for one important point: the logo does not appear anywhere in the print-out.

Lost World’s Fairs
The smooth printed page helps to carry the visuals of the website for Lost World’s Fairs. The main title and its colorful background are swapped for a simplified version in the print-preview style. However, some images could be removed to save some expensive printer ink. (Updated).

The Morning News
One would expect most news websites to employ the print-preview function, yet that isn’t the case. The Morning News has prepared its content for print without much concern, happily excluding background images and color, while still getting its message across.

James Li
James Li has designed his personal website exceptionally well for this purpose, carefully preserving all spacing and key elements. The logo is a part of the printed product, whereas the navigation links are not: very clever, because navigation has no value on a printed page unless it is informative in and of itself. Non-Web fonts are converted to simple printable ones (see “Other Stuff…”). Brilliantly executed for print.

TechCrunch
TechCrunch’s recent redesign tweaked not only the visual design of the site, but also the small details that have to be considered when the site is viewed on mobile or printed out. The print layout is very clean and minimalistic, without unnecessary details, yet also without links to the actual page that was printed out. The TechCrunch logo is omitted as well.

R/GA
Although the logo isn’t present in the printed version of this website, attention is paid to the spacing of the content within. While the Web version has simple lines and a clean space, the printed page tightens up elements in order to best use the space. A strong grid and effective typography add to the effect. In this example, some images could be removed as well.

Studio Mister
An excellent job of the print-preview function. The page has been meticulously designed to a grid and requires little in order to prepare it for print; some attention to the background color of text and not much else. Unfortunately, though, the logo is a background image and thus excluded.

Bottlerocket Creative
Although this logo isn’t represented in the print-out either, the folks at Bottlerocket Creative have done very well to adapt their typographic style for offline viewing. Assuming the design was created mainly with images would be easy, but meticulous attention to type is evident upon closer inspection.

OmniTI
OmniTI has optimized its content for print not by shrinking the main column, but by increasing the size of the text and not crowding the images together. The playful look adheres to good spacing. The only drawback? Many of the line breaks have been eliminated, causing some words and sentences to run into each other.

In Conclusion

There’s a lot to consider when preparing your website to be printed out by readers. The process forces you to scrutinize every element of your content like never before, all because someone will want a hard copy of your work. Yet most of all, it’s important to recognize the difference between printing and actually reading. Perhaps these techniques hold merit in helping you visualize content for mobile devices. What better way to kill two birds with one stone than to work out your layout for the mobile while considering printing view at the same time to make sure that your content prints flawlessly for offline archival? The time you invest could double in value.

For more information on preparing content for print, including by modifying CSS, check out the following articles:

“Print Style Sheet: The Definitive Guide,” Trenton Moss, Webcredible
“6 Things I Learned About Print Stylesheets From HTML5 Boilerplate,” Joshua Johnson, DesignShack
“CSS Design: Going to Print,” Eric Meyer, A List Apart
“CSS-Tricks Finally Gets a Print Style Sheet,” Chris Coyier, CSS-Tricks
“CSS Print Profile,” W3C
“Media Queries,” W3C

(al) (vf) (il)

css print

Responsive Web Design Techniques, Tools and Design Strategies

10 months ago

by Smashing Editorial in Network Posts

Advertisement in Responsive Web Design Techniques, Tools and Design Strategies

in Responsive Web Design Techniques, Tools and Design Strategies

Back in January, we published an article on responsive design, “Responsive Web Design: What It Is and How to Use It.” Responsive design continues to get a lot of attention, but considering how different it is from the “traditional” way of designing websites, it can be a bit overwhelming for those designers who have yet to try it.

To that end, we’ve compiled this round-up of resources for creating responsive website designs. Included are tutorials, techniques, articles, tools and more, all geared toward giving you the specific knowledge you need to create your own responsive designs.

Responsive Design Techniques

CSS Transitions and Media Queries
Elliot Jay Stocks provides insight into the combination of CSS media queries and CSS transitions. The basic premise is this: you use media queries to design responsive websites that adapt in layout according to browser width, and you constantly resize your browser to see how the website performs, but every time a query kicks in, there’s a harsh jump between the first style and the second. Why not use some simple CSS transitions to smooth the jump by animating the resize? A nice case study.

Responsive Data Tables
Chris Coyier and Scott Jehl are experimenting with responsive design techniques for displaying data tables. By default, data tables can be quite wide, and necessarily so. You could zoom out and see the whole table, but then the text size would be too small to read. You could zoom in to make it readable, but then you’d have to scroll both vertically and horizontally (sad face) to browse the table. One solution is to reformat the table for better readability. Another is to display a pie graph from the data. Yet another is to adapt the table into a mini-graphic for narrow screens (rather than interfering much with the content when the full table is displayed).

Responsive Navigation Menus: Convert a Menu to a Dropdown for Small Screens
Chris Coyier describes another technique for converting a regular row of links into a dropdown menu when the browser window is narrow. When the user is on a small screen and clicks the dropdown, they’ll get an interface to select an option that is nice and big and easy to choose. Obviously much better than displaying a tiny link.

CSS Media Queries and Using Available Space
A tutorial from CSS-Tricks that discusses how to make subtle changes with media queries and how to use media queries in a single style sheet. For instance, if you have a fluid-width design in which the sidebar is 35% of the width of the page, depending on the width of the browser window, you could say, “If the browser is really narrow, do this. If it’s wider, do this. If it’s really wide, do this.” In the article, you’ll learn how to modify a list of links according to the browser’s viewport.

Responsive Images, Responsive Videos

Fluid Images
Fluid images are a central aspect of a responsive design. This article by Ethan Marcotte gives a thorough overview on creating them using the classic img { max-width: 100%; } code snippet, as well as details to get you started.

Responsive Image: Experimenting With Context-Aware Image Sizing
An alternative approach to fluid images by Filament Group. This technique allows designers to create responsive layouts that serve different image sizes at different resolutions. Effectively, it allows designers to create mobile-optimized images for smaller screens, and then serve higher-resolution versions to larger screens. Filament Group has developed this technique that uses .htaccess files and JavaScript to serve up different sized images based on the screen width. An alternative solution is to use tools like TinySrc which allows you to merely prefix all large images in your source code with a TinySrc URL, and the tool does the rest.

Responsive Images and Context-Aware Image Sizing
Craig Russell has developed a technique that uses a server-side script (in PHP) to serve up images of several different resolutions. The idea is that within the PHP script, a nested array is used that lists image files and their relative percentage scales. In HTML, the image’s src attribute would be set to get the requested image’s id, but with no scale specified. A JavaScript calculates the percentage width of the image relative to the maximum width of the container, and this figure is then appended to the end of the src attribute as the scale parameter. The comments in the article contain some nice ideas and suggestions on how the technique could be improved.

Responsive Images Right Now
Harry Roberts’ idea is to use the img element for the smaller of the two images, the image that you want mobile users to download. You would also have a containing div to which you apply the large version of the image as a background through CSS. You then hide the img from desktop users, and show them the large CSS background, and hide the background image from mobile users and just serve them the smaller inline image.

Responsive Images Using CSS3
Nicolas Gallagher’s method relies on the use of @media queries, CSS3-generated content and the CSS3 extension to the attr() function. By combining the content property with the CSS3 extension to attr(), you are able to specify that an attribute’s value should be interpreted as the URL part of a url() expression. In this case, it means you will be able to replace an image’s content with the image found at the destination URL, stored in a custom HTML data-* attribute.

Responsive Images Using Cookies
Keith Clark suggests using cookies to serve smaller images to mobile users. Whenever a browser requests a file from a server, it automatically forwards any cookie data along with the request. If we use JavaScript to populate a cookie with the current screen’s dimensions, all subsequent requests made by the browser will pass this data to the server. In other words, the server would know the screen size of the device that is asking for the file.

Responsive Images With ExpressionEngine
John Faulds presents a technique for responsive images that is different from the techniques presented above. It involves querying the device’s user agent string to determine whether it is mobile, and then setting a global variable that can then be used in templates to modify the size of the image output. Basically, only one image gets sent to the browser, but that image is different depending on whether you’re viewing the page on a mobile or desktop device.

CSS: Elastic Videos
Nick La applies the max-width: 100%; snippet to videos and presents techniques that make HTML5 videos and object- and iFrame-embedded videos responsive. For the latter, the trick is very simple. Just wrap the embedding code in a div container, and specify a 50% to 60% padding-bottom. Then, specify the child elements (iFrame, object embed) and a 100% width and 100% height, with absolute positioning. This will force the embedded elements to expand full width automatically. Initially discovered by Thierry Koblentz.

Resizeable Images (At Full Resolution!)
A quick tutorial from CSS-Tricks on resizing images while maintaining resolution.

Responsive Email Newsletters

Optimizing Your Email for Mobile Devices With the Media Query
Wide emails often require horizontal scrolling, especially when there’s a large image. This case study by Campaign Monitor explains how emails can be optimized for mobile devices using media queries and offers a couple of useful techniques and snippets to be used right away.

Responsive Design for Email, the Largest Mobile Audience
Another interesting case study that shows how the development team behind Beanstalk applied screen-size-specific media queries to target styles, and what design decisions were made to make the mobile email experience better.

Media Queries in HTML Emails
This article covers using media queries to target specific mobile email clients.

Guide to CSS Support in Email
Designing an HTML email that renders consistently across major email clients can be time-consuming. Support for even simple CSS varies considerably between clients, and even different versions of the same client. Campaign Monitor has put together a guide to save you the time and frustration of figuring it out for yourself. With 24 different email clients tested, it covers all of the popular applications across desktop, Web and mobile email.

Responsive Design Tools

You can build a responsive design from scratch, or you can use some of the tools listed below to speed up and smooth out the process.

Respond.js
Scott Jehl’s fast and lightweight polyfill for min-width and max-width CSS3 media queries (for IE 6 to 8 and more). css3-mediaqueries-js is another script that enables IE 5+, Safari 2 and Firefox 1+ to transparently parse, test and apply CSS3 media queries.

WebPutty: Scientific Progress CSS Editing
This tool is a Web-based CSS editor with auto-save feature and a real-time preview of your website. WebPutty also has CSS selector highlighting and SCSS support (for Sass and LESS), as well as Compass support. To use the tool, just embed a link tag at the end of your website’s head tag.

Debugging CSS Media Queries
In responsive Web design, we’re working with different states, widths and viewport sizes. Johan Brook shares a quick tip for indicating (with pure CSS) which media query has kicked in. The article also provides a mixin for developers using Sass. A demo is available as well.

Responsive Design Testing
This tool is for everyone who needs a quick and easy way to test their website design in multiple screen widths. Change the defaultURL variable at the top of the responsive.js file to your own site and navigate your website from within the frames.

Responsive Containers: Selector Queries
This JavaScript by Andy Hume allows you to add selector queries and responsive containers to your design. Essentially, you can apply different class values to an HTML element based on its width.

Resize My Browser
If you need your browser to display content in a certain window size this is what you have been looking for. Just click on the size you need and check out what your size looks like. Does not work in Chrome and Opera due to issues with the “ResizeTo” event.

Media Query Bookmarklet
A handy tool that shows you exactly what size the viewport has and which media query just fired. Drag it to your bookmarks bar and have it ready when needed.

Responsivepx
Use the information this little gadget provides in your media queries to create responsive designs.

ProtoFluid
A tool for rapid prototyping of responsive design. You can prototype CSS on a variety of popular device sizes, orientations and browsers, be they phones (BlackBerry Torch, Google Nexus One, iPhone, Motorola Droid), tablets (BlackBerry Playbook, iPad, Samsung Galaxy Tab, Dell Streak), monitors or televisions (720p, 1080p). You can preview designs right in the browser and use your development tools like Firebug. You might want to check an alternative tool ScreenFly as well.

Fluid Grid Calculator
Harry Roberts has developed a calculator and generator of fluid grids for your responsive designs. Just provide the number of columns, the width of one column and the width of the gutters, and the tool will generate a fluid grid system in CSS for you. Handy!

Free HTML5/CSS3 WordPress 3.1+ Theme With Responsive Layout: Yoko
Yoko is a modern and flexible WordPress theme. With the responsive layout based on CSS3 media queries, the theme adjusts to different screen sizes. The design is optimized for big desktop screens, tablets and small smartphone screens. To make your blog more individual, you can use the new post formats (like gallery, aside or quote), choose your own logo and header image, customize the background and link color.

Scherzo, a Responsive WordPress Theme
This WordPress theme is a fine example of responsive design, displaying nicely on almost all devices and screens.

Responsive Design Templates

320 and Up
320 and Up works on the “tiny screen first” principle, whereby designs are created for mobile screens first, and then expanded for tablets, desktops, and large screens. It works well as an extension to HTML5 Boilerplate and as a standalone kit.

Media Queries for Standard Devices
Here is a useful template for media queries for standard devices: empty placeholders for targeting devices and attributes that you might be interested in when making responsive designs.

Mobile Boilerplate
Here is a customizable template for creating rich, high-performance mobile Web apps. You’ll get cross-browser consistency among A-grade smartphones, and fallback support for legacy BlackBerry, Symbian and IE Mobile. You’ll also get offline caching for free, fast button clicks, a media query polyfill and many common mobile Webkit optimizations.

Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development
Skeleton is a small collection of CSS and JavaScript files that can help you rapidly develop websites that look beautiful at any size, be it a 17-inch laptop or an iPhone. Skeleton is a grid that is responsive right down to mobile. It is well organized and well structured and provides most basic styles as a foundation.

Responsive Design Frameworks

1140 CSS Grid
1140 CSS Grid is optimized to work on screens ranging from the size of mobiles to 1280 pixels wide. It’s a simple flexible grid system that uses media queries for smaller screens, essentially stacking columns on top of one another.

inuit.css
This CSS framework is built to provide a solid foundation for designs on smaller screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effort. It also has a custom grid system builder for creating fluid grid systems.

Flurid
Flurid is a liquid grid layout with up to 16 columns.

FluidGrids
FluidGrids is a fluid grid framework that creates layouts based on 6, 7, 8, 9, 10, 12 or 16 columns.

Less Framework 4
A CSS grid system for creating adaptive layouts. It includes four basic layouts (including tablet, mobile and wide mobile), with three sets of typography presets.

Fluid Grid System
This fluid grid framework includes a typographic grid and baseline grid.

Tiny Fluid Grid
Tiny Fluid Grid helps you generate your own fluid grid with 12, 16 or 24 columns, minimum and maximum widths, and percentage-based gutters.

Responsive Design Workflow and Strategies

The Responsive Designer’s Workflow
Luke Wroblewski’s conference notes on Ethan Marcotte’s presentation about applying responsive Web design principles and workflows to the redesign of a major newspaper website. Among other things, Ethan explains how he approaches the responsive design methodology, what the design process looks like and how prototyping is done in the context of responsive design.

The Goldilocks Approach to Responsive Web Design
The Goldilocks Approach stresses device-independent layouts that look perfect regardless of the device they’re viewed on.

Content Choreography
Read up on how to properly plan your site to live up to todays standards. Begin to choreograph content proportional to size to serve the best possible experience at any width.

Structured Content First
In this presentation, Stephen Hay discusses a couple of troubles you might run into when structuring your content and argues that properly structured content is portable to future platforms. Stephen suggests that we think about creating and designing structured content first that caters to the lowest common layout denominator, whether this be a small screen or a text browser. This content should be able to go anywhere.

Design for a Target Experience First
Another interesting perspective on a responsive designer’s workflow; Nathan C. Ford focuses on experience of its users first and then derives user scenarios and media queries from it. “There are goals for sites that reach beyond simple readability, where a lack of features can actually diminish the experience. I am working on such a project now. Our approach has been to peruse the research and tailor an optimal experience for the most likely user scenarios. Working out from there, we judicially edit and hone for each media query.”

More Responsive Design, Please
This article by Jason Things covers responsive design based on a layout/content/capability/user intent scheme, which sheds interesting new light on the challenges that responsive design can create. It’s a well thought out piece and is certainly worth a read.

Breaking Development
Luke Wroblewski took notes at the Breaking Development Conference while Stephen Hay talked about the realities of designing for different device experiences.

Patterns for Multiscreen Strategies
Have a look at this simple but effective slideshow to get an idea of which core factors play a role in multiscreen concepts.

Responsive Web Design from the Future
According to Kyle Neath, responsive web design is about a lot more than the size of your screen. This talk is about about how GitHub handles links, the url bar, partial page updates, and explains why Kyle thinks the HTML5 history API is the most important thing to happen to front end development since Firebug. An inspiring presentation.

Developing a Progressive Mobile Strategy
In this presentation, Dave Olsen presents a progressive mobile strategy that consists of audience strategy, content strategy and platform strategy. Dave argues that to develop a sustainable and scalable mobile strategy, you need to answer the questions, “What value will the targeted audiences get from this content?” and “How do we develop solutions to handle both mobile and native now, as well as the devices of the future?” An interesting presentation.

How to Use CSS3 Media Queries to Create a Mobile Version of Your Website
In this Smashing Magazine article, Rachel Andrew explains how, with a few CSS rules, you can create an iPhone version of your website using CSS3 — one that will work now. You’ll see a very simple example and learn the process of adding a small device style sheet to a website to show how easily we can add mobile-specific style sheets to existing websites. You may want to consider reading Aaron Gustafson’s article “Adaptive Layouts With Media Queries” and Emily Lewis’ piece “Respond to Different Devices With CSS3 Media Queries” as well.

Discussions and Points of View on Responsive Design

While not tutorials per se, the articles here give you valuable insight into why you should use responsive design techniques (and when you maybe shouldn’t use them).

Responsive by Default
Andy Hume explains what in his opinion responsiveness is all about. It’s what a website does when it’s loaded into an unknown browser on an unknown device by an unknown individual. It’s “how you deal with “the most hostile software development environment ever imagined” (via Douglas Crockford). Like progressive enhancement it’s a strategy that frees you to work with the web rather than fight against it.” An interesting point of view.

Responsive Web Design or Separate Mobile Site? Eh, It Depends
An interesting article discussing the pros and cons of responsive designs vs. dedicated mobile websites.

The Case Against Responsive Web Design
It seems only fair to include some dissenting opinions here about when responsive design is and is not appropriate. This article discusses why responsive design doesn’t always make sense from a user experience perspective. Take a look in the comments section, too. Luke Jones has a similar opinion.

A Responsive Mind
A discussion on Jeremy Keith’s blog about the necessary parts of a responsive design and how to effectively create different layouts based on different screen sizes. Examples are included.

Responsive Enhancement
An excellent introduction to responsive design as a way of thinking rather than as a tool or technique. Jeremy Keith argues that responsive Web design can’t be tacked on to the end of an existing workflow. Instead of pixel perfection, we should be thinking of proportion perfection. An inspiring read.

Mobile-First Responsive Web Design
Mobile First Responsive Web Design is a combination of philosophies and strategies with the aim to achieve a wider application of best practices in the area.

Where are the Mobile First Web Designs?
In this article Jason Grigsby presents the findings from his study on responsive designs, their features and appearance as well as general remarks on the state of art of Responsive Web Design.

Further Resources

Here are some additional resources for creating responsive designs that don’t fit neatly into the categories above.

Media Queries
A growing collection of websites that use media queries.

Responsive Web Design, by Ethan Marcotte
This book, written by Ethan Marcotte and published by A Book Apart, is a fantastic resource for learning how to design responsive websites. It covers the basics of the responsive Web, flexible grid systems, flexible images and media queries, and it gives insight into how to create responsive designs.

The Big Web Show Episode #9: Responsive Web Design
Jeffrey Zeldman and Dan Benjamin sit down with Ethan Marcotte for episode 9 of The Big Web Show to discuss responsive design, among other topics.

Last Click

The Latest in HTML5
This slideshow covers some techniques and lesser-known HTML5 gems that could get implemented in browsers in the near future: among other things, server-side media queries with JavaScript and form-factor detection.

Would you like to see more round-ups like this one on SM?

(al)

css mobile

Site Bookmark #1 : HTML dan CSS

11 months ago

by achmatim in web development

Ini merupakan seri pertama dari postingan mengenai “Site Bookmark“. Di dalam postingan ini, saya ingin menyajikan 7 situs yang menurut saya cukup menarik dan tentunya saya simpan (bookmark). Untuk yang pertama ini, saya menyajikan 7 situs yang berhubungan dengan HTML dan CSS, baik tools, framework maupun tips dan triks.

#1. Holmes: The CSS Markup Detective

Situs ini menyajikan satu tools yang cukup menarik. holmes.css merupakan suatu tools yang dapat membantu kita dalam memeriksa kualitas dari perintah HTML dan CSS yang kita bangun berdasarkan standar W3C HTML5. Error akan langsung ditampilkan di web dalam bentuk border yang berwarna tertentu pada elemen yang error. Jika terdapat error yang tidak bisa ditoleransi maka akan terdapat border warna merah, jika hanya berupa warning, maka border berwarna kuning dan jika terdapat perintah yang deprecated maka error berwarna abu-abu (grey).

(more…)

Popularity: 5% [?]

7 bookmark css html mobile

Useful HTML-, CSS- and JavaScript Tools and Libraries

11 months ago

by Smashing Editorial in Network Posts

Front-end development is a tricky beast. It’s not difficult to learn, but it’s quite difficult to master. There are just too many things that need to be considered; too many tweaks that might be necessary here and there; too many details to make everything just right. Luckily, developers and designers out there keep releasing useful tools and resources for all of us to learn, improve our skills and just get better at what we do. Such tools are valuable and helpful because they save our time, automate mundane tasks and hence help us focus on more important things. Here at Smashing Magazine, we’re continuously searching for time-saving, useful HTML-, CSS- and JavaScript-resources for our readers, to make the search of these ever-growing tools easier. We hope that these tools will help you improve your skills as well as your professional workflow. A sincere thanks to all designers and developers who are featured in this round-up. We respect and appreciate your contributions to the design community.

HTML and CSS Tools

HTML Email Boilerplate This website and its sample code creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there. It also provides some helpful examples and snippets that will keep your email design rendering as true-to-form as possible.

Initializr This tool creates a customizable template based on HTML5 Boilerplate. Decide whether you want sample content, choose between JavaScript and jQuery, and specify your compatibility and server configuration needs. You’ll get a template based on key features of Boilerplate to start your next project. You might want to check out The HTML5 Framework Generator as well.

Layer Styles A nice simple tool for creating CSS in an intuitive way — very much like you would do with a graphics editor. The tool lets you add drop shadow, inner shadow, background, border and border radius and generates cross-browser CSS code.

Mobile Boilerplate A template that creates rich and performant mobile Web apps. You can get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

Kotatsu A simple HTML table generator that helps you create a table and throw in row as well as column classes quickly and easily. And if you want a quick tool to generate lists, you might want to take a look at li maker.

Zen Coding Zen Coding is an editor plugin for high-speed coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions (similar to CSS selectors) into HTML code. Vogue This tool reloads the style sheet (not the HTML) of a page in all browsers, and it can even be configured to reload a page automatically in multiple browsers at the same time. The tool doesn’t host your website but rather runs your website’s own local server. To use it, you just need to install NodeJS and npm.

LiveReload LiveReload applies CSS/JS changes to Safari or Chrome without reloading the page and reloads the page automatically once the HTML changes. Alternatively, take a look at Live.js, a library that makes sure that you’re always looking at the latest version of the page you’re working on, whether you are writing HTML, CSS or JavaScript.

css-x-fire This tool allows editing CSS properties in the IDE from Firebug CSS editor and also allows the developer to concentrate on CSS styling without having to refresh the browser.

Ffffallback A bookmarklet that lets you test different font stacks to find the best result. It bascially scans the page’s CSS and creates a clone page where you can test and analyze different fallback fonts.

LESS.app for Mac OS X LESS extends CSS with variables, nested rules and operators. This app makes it very simple to use {Less} by automatically compiling *.less files into standard CSS.

Less-Boilerplate Boilerplate CSS is written in Less and includes a CSS reset, CSS3 helpers, centered column blocks, and much more.

Needle v0.1a1 Needle is a handy tool you can use to test whether your CSS renders correctly by taking screenshots of portions of a website and comparing them with other screenshots. It also provides tools for testing calculated CSS values and the position of HTML elements.

inuit.css A CSS framework that provides you with the best dev tips, tricks and practices in one handy file.

Spritemapper This application merges multiple images into one and generates CSS positioning for the corresponding slices; by reducing the amount of images and better utilizing the connection, CSS spritemapping can reduce your website’s loading time.

CSSsitemap System David Leggett shares with us the code for a CSS-based sitemap that Andrew Maier and himself have created and are still working on. A set of tools for project documentation & UX designers is also coming up soon.

CSS Stress Testing and Performance Profiling Andy Edinborough shares the code he uses for his so-called ‘CSS Stress Test’ for almost all browsers. Normalize.css Normalize.css takes a slightly different approach to CSS resets. Rather than eliminating all browser defaults, Jonathan Neal and Nicolas Gallagher have taken the time to research how different browsers handle different bits of code and then kept the defaults that are useful. It saves you time as a designer, while also providing consistent results.

Holmes The tool is a diagnostic CSS style sheet that highlights possibly invalid or erroneous mark-up. Just add a single class, and it will create a red border around errors, a yellow border around warnings and a gray border around deprecated styles. In addition to the downloadable CSS style sheet, there’s also a Holmes bookmarklet that lets you apply holmes.css to any page within your browser.

CSS Crush A CSS pre-processor that is familiar, convenient, intuitive, and much more — everything Pete Boere wants a pre-processor to be.

CSSPrefixer CSSPrefixer helps you improve your workflow and saves you a lot of time while inserting all of the necessary CSS prefixes for various browsers.

iOS Media Query Previewer A very simple tool to preview how a particular website looks on an iPhone as well as iPad.

CSS Pivot Here you can add CSS styles to any website and share the result with a short, handy link. PCSS A PHP-driven CSS preprocessor that helps you unleash the CSS3 power with much less code and features like class nesting, server-side browser specifics, default unit and variables. The tool requires PHP5.

JavaScript Tools

Modernizr 2 Modernizr is a widely used open-source JavaScript library that helps you build HTML5 and CSS3-powered websites. With the second version of the tool, you can now combine feature detection with media queries and conditional resource loading. That gives you the power and flexibility to optimize for every circumstance. Developed by Paul Irish, Faruk Ateş and Alex Sexton.

yepnope.js A conditional loader for your polyfills that is very fast and allows you to load only the scripts that your users actually need.

FitText FitText is a jQuery plug-in for responsive and fluid layouts that resizes display text to fit the parent element. A good solution for creating headlines that look good on everything from a small mobile device to a 30-inch desktop display.

jQuery Waypoints Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

jQuery Plugin Boilerplate This boilerplate implements public and private methods, as well as public and private properties, making it very easy when building both simple and complex jQuery plugins.

ligature-js This Java script lets you convert text patterns into common typographic ligatures by going through the text on a web page and inserting ligatures where appropriate.

Placeholder jQuery Plugin/Polyfill This jQuery plugin provides support for the new placeholder="" HTML5 form attribute in browsers that don’t natively support it (IE et al).

StronglyTyped A JS library that allows you to specify strongly typed properties of various types (Boolean, Number, String, etc.) and constants (final properties in Java). It uses ES5 getters and setters and falls back to regular, loosely typed properties in non-supporting browsers.

Kaffeine A set of extensions to the JavaScript syntax that attempts to make it nicer to use. It compiles directly into JavaScript that is very similar, readable and line for line equivalent to the input.

Crossroads.js A JS routing library inspired by URL Route/Dispatch utilities which are present on frameworks like Rails, Pyramid, Django, CakePHP, CodeIgniter, etc. It parses a string input and decides which action should be executed by matching the string against multiple patterns.

Doctor JS Doctor JS analyzes your JavaScript code and provides you with a complete analysis in JSON, whether you’re dealing with polymorphism, prototypes, exceptions or callbacks. Tell Doctor JS about it:

HEAD.js A script that speeds up, simplifies and modernizes your site — a concise solution to universal issues. You can load scripts like images as well as use HTML5 and CSS3 safely. Hivelogic Posting your email address on a website is an easy way to get an inbox full of spam. This anti-spam email address enkoder helps protect email addresses by converting them into encrypted JavaScript code so only real people using real browsers will see them. An alternative, more robust solution is Mollom.

JavaScript Garden A JS project that offers advice on avoiding common mistakes and subtle bugs, and lays down performance issues and bad practices that JavaScript programmers might run into on their journey to the depths of the language.

Syntaclet By clicking on the Syntaclet bookmarklet, you can automatically see all language specific syntax colored with line numbers to all the code on the page.

Bookmarkleter This tool creates bookmarklets from JavaScript code. It removes new lines, tabs, and optional spaces, URL-encodes special ASCII characters and places code in a wrapper function (if not done already).

Bookmarklet Crunchinator This great tool helps you quickly create a bookmarklet from any JavaScript code and will automatically be wrapped in a function to make it bookmarklet-friendly.

Grids

The JavaScript Grid A JavaScript-based grid overlay — just drag the snipplets into your bookmarks bar, open your URL and click the bookmark.

Grid Calculator A calculator that helps you easily create your own grid and download it for either Adobe Illustrator or Photoshop.

GridCalc This easy-to-use grid calculator lets you download a configuration as a CSS file which you can use in your project by simply entering the desired width of your page and an aproximate range for your column and gutter width. The calculator then gives you all the possible combinations within the limits you entered and provides you with a nice visual representation of the results and how the grid can be used.

Modular Grid Pattern This tool enables you to create a grid template for Photoshop and other image editing applications. Enter the baseline, the module’s width and height, the gutter width, and the number of modules (columns), and it gives you a custom pattern to import into Photoshop. A Photoshop extension is also available, and you can download a PNG or transparency map, too.

Susy A Rails framework that enables you to create a completely custom grid based on your mark-up and designs. No more compromises because the grid framework you’re working with isn’t quite what you need, and no more spending hours tweaking things to get them just right so that the design works the way you want.

Griddle.it A clean and simple way to help you align your layouts. All you need to do is put your dimensions after the URL provided to get a background guide image to work with in your browser. Grids are created on the fly, so any combination should work.

Last Click

ASCII Pronunciation Rules for Programmers Most programmers would recognize ASCII characters on a website and know how to use them in their own work. But how many know what to call all those characters? This article gives a pretty thorough rundown of common and not-so-common names for ASCII characters. It’s a useful guide if you’re ever at a loss when listening to another programmer speak about coding.

Weave Silk Is your desktop, motivation or even design work in need of something fresh, swirly and remarkable? Just weave some Silk! Yuri Vishnevsky created this experimental, magical interactive gimmick. You can spend minutes playing around with this little technique, based upon HTML5 Canvas: no Flash in use.

From Me To You No, this has nothing to do with CSS, HTML or JavaScript, but it is just remarkable. On his photography blog, Jamir collects scenes from around the world, memorable events, food, people and small personal universes. The interesting part is that the photos are animated (hence the name); they come to life using good old animated GIFs. Pay a visit to the article Positioning an animated gif over a jpg image. His short tutorial explains how to save on bytes when putting GIFs and JPEGs together, without losing too much quality.

You might want to take a look at our previous related articles:

Powerful New CSS Techniques and Tools (April 2011)
Useful JavaScript and jQuery Tools, Libraries, Plugins (April 2011)
CSS: Innovative Techniques and Practical Solutions (February 2011)
Time-Saving and Educational Resources for Web Designers (January 2011)

(vf) (il)

css html javascript

An Introduction To CSS3 Keyframe Animations

1 year ago

by Louis Lazaris in Network Posts

By now you’ve probably heard at least something about animation in CSS3 using keyframe-based syntax. The CSS3 animations module in the specification has been around for a couple of years now, and it has the potential to become a big part of Web design. Using CSS3 keyframe animations, developers can create smooth, maintainable animations that perform relatively well and that don’t require reams of scripting. It’s just another way that CSS3 is helping to solve a real-world problem in an elegant manner. If you haven’t yet started learning the syntax for CSS3 animations, here’s your chance to prepare for when this part of the CSS3 spec moves past the working draft stage. In this article, we’ll cover all the important parts of the syntax, and we’ll fill you in on browser support so that you’ll know when to start using it.

Animated-scene in An Introduction To CSS3 Keyframe Animations

A Simple Animated Landscape Scene

For the purpose of this article, I’ve created a simple animated landscape scene to introduce the various aspects of the syntax. You can view the demo page to get an idea of what I’ll be describing. The page includes a sidebar that displays the CSS code used for the various elements (sun, moon, sky, ground and cloud). Have a quick look, and then follow along as I describe the different parts of the CSS3 animations module. (NOTE: Safari has a bug that prevents the animation from finishing correctly. This bug seems to be fixed in Safari using a WebKit nightly build, so future versions of Safari should look the same as Chrome. See more under the heading “The Animation’s Fill Mode”) I’ll describe the CSS related to only one of the elements: the animated sun. That should suffice to give you a good understanding of keyframe-based animations. For the other elements in the demo, you can examine the code on the demo page using the tabs.

The Keyframe @ Rule

The first unusual thing you’ll notice about any CSS3 animation code is the keyframes @ rule. According to the spec, this specialized CSS @ rule is followed by an identifier (chosen by the developer) that is referred to in another part of the CSS. The @ rule and its identifier are then followed by a number of rule sets (i.e. style rules with declaration blocks, as in normal CSS code). This chunk of rule sets is delimited by curly braces, which nest the rule sets inside the @ rule, much as you would find with other @ rules. Here’s the @ rule we’ll be using:

@-webkit-keyframes sunrise {
	/* rule sets go here … */
}

The word sunrise is an identifier of our choosing that we’ll use to refer to this animation. Notice that I’m using the -webkit- prefix for all of the code examples here and in the demo. I’ll discuss browser support at the end of this article, but for now it’s enough to know that the only stable browsers that support these types of animations are WebKit-based ones.

The Keyframe Selectors

Let’s add some rule sets inside the @ rule:

@-webkit-keyframes sunrise {
   0% {
      bottom: 0;
      left: 340px;
      background: #f00;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
   }

   66% {
      bottom: 340px;
      left: 40px;
      background: #ffd630;
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
   }
}

With the addition of those new rule sets, we’ve introduced the keyframe selector. In the code example above, the keyframe selectors are 0%, 33%, 66%, and 100%. The 0% and 100% selectors could be replaced by the keywords “from” and “to,” respectively, and you would get the same results. Each of the four rule sets in this example represents a different snapshot of the animated element, with the styles defining the element’s appearance at that point in the animation. The points that are not defined (for example, from 34% to 65%) comprise the transitional period between the defined styles. Although the spec is still in development, some rules have been defined that user agents should follow. For example, the order of the keyframes doesn’t really matter. The keyframes will play in the order specified by the percentage values, and not necessarily the order in which they appear. Thus, if you place the “to” keyframe before the “from” keyframe, the animation would still play the same way. Also, if a “to” or “from” (or its percentage-based equivalent) is not declared, the browser will automatically construct it. So, the rule sets inside the @ rule are not governed by the cascade that you find in customary CSS rule sets.

The Keyframes That Animate the Sun

For the purpose of animating the sun in this demo, I’ve set four keyframes. As mentioned, the code above includes comments that describe the changes. In the first keyframe, the sun is red (as if it were just rising or setting), and it is positioned below ground (i.e. not visible). Naturally, the element itself must be positioned relatively or absolutely in order for the left and bottom values to have any effect. I’ve also used z-index to stack the elements (to make sure, for example, that the ground is above the sun). Take note that the only styles shown in the keyframes are the styles that are animated. The other styles (such as z-index and position, which aren’t animated) are declared elsewhere in the style sheet and thus aren’t shown here.

0% {
	bottom: 0; /* sun at bottom */
	left: 340px; /* sun at right */
	background: #f00; /* sun is red */
}

About one third of the way into the animation (33%), the sun is on the same horizontal plane but has risen and changed to a yellow-orange (to represent full daylight):

33% {
	bottom: 340px; /* sun rises */
	left: 340px;
	background: #ffd630; /* changes color */
}

Then, at about two thirds into the animation (66%), the sun has moved to the left about 300 pixels but stays on the same vertical plane. Notice something else in the 66% keyframe: I’ve repeated the same color from the 33% keyframe, to keep the sun from changing back to red too early.

66% {
	bottom: 340px;
	left: 40px; /* sun moves left across sky */
	background: #ffd630; /* maintains its color */
}

Finally, the sun gradually animates to its final state (the full red) as it disappears below the ground.

100% {
	bottom: 0; /* sun sets */
	left: 40px;
	background: #f00; /* back to red */
}

Associating The Animation Name With An Element

Here’s the next chunk of code we’ll add in our example. It associates the animation name (in this case, the word sunrise) with a specific element in our HTML:

#sun.animate {
	-webkit-animation-name: sunrise;
}

Here we’re introducing the animation-name property. The value of this property must match an identifier in an existing @keyframes rule, otherwise no animation will occur. In some circumstances, you can use JavaScript to set its value to none (the only keyword that has been reserved for this property) to prevent an animation from occurring. The object we’ve targeted is an element with an id of sun and a class of animate. The reason I’ve doubled up the id and class like this is so that I can use scripting to add the class name animate. In the demo, I’ve started the page statically; then, with the click of a button, all of the elements with a particular class name will have another class appended called animate. This will trigger all of the animations at the same time and will allow the animation to be controlled by the user. Of course, that’s just one way to do it. As is the case with anything in CSS or JavaScript, there are other ways to accomplish the same thing.

The Animation’s Duration And Timing Function

Let’s add two more lines to our CSS:

#sun.animate {
	-webkit-animation-name: sunrise;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease;
}

You can specify the duration of the animation using the animation-duration property. The duration represents the time taken to complete a single iteration of the animation. You can express this value in seconds (for example, 4s), milliseconds (2000ms), and seconds in decimal notation (3.3s). The specification doesn’t seem to specify all of the available units of time measurement. However, it seems unlikely that anyone would need anything longer than seconds; and even then, you could express duration in minutes, hours or days simply by calculating those units into seconds or milliseconds. The animation-timing-function property, when declared for the entire animation, allows you to define how an animation progresses over a single iteration of the animation. The values for animation-timing-function are ease, linear, ease-out, step-start and many more, as outlined in the spec. For our example, I’ve chosen ease, which is the default. So in this case, we can leave out the property and the animation will look the same. Additionally, you can apply a specific timing function to each keyframe, like this:

@-webkit-keyframes sunrise {
   0% {
      background: #f00;
      left: 340px;
      bottom: 0;
      -webkit-animation-timing-function: ease;
   }

   33% {
      bottom: 340px;
      left: 340px;
      background: #ffd630;
      -webkit-animation-timing-function: linear;
   }

   66% {
      left: 40px;
      bottom: 340px;
      background: #ffd630;
      -webkit-animation-timing-function: steps(4);
   }

   100% {
      bottom: 0;
      left: 40px;
      background: #f00;
      -webkit-animation-timing-function: linear;
   }
}

A separate timing function defines each of the keyframes above. One of them is the steps value, which jerks the animation forward a predetermined number of steps. The final keyframe (100% or to) also has its own timing function, but because it is for the final state of a forward-playing animation, the timing function applies only if the animation is played in reverse. In our example, we won’t define a specific timing function for each keyframe, but this should suffice to show that it is possible.

The Animation’s Iteration Count And Direction

Let’s now add two more lines to our CSS:

#sun.animate {
	-webkit-animation-name: sunrise;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
}

This introduces two more properties: one that tells the animation how many times to play, and an indicator that tells the animation to animate back to the start position. The animation-iteration-count property is set to 1, meaning that the animation will play only once. This property accepts an integer value or infinite. In addition, the animation-direction property is set to normal (the default), which means that the animation will play in the same direction (from start to finish) each time it runs. In our example, the animation is set to run only once, so the property is unnecessary. The other value we could specify here is alternate, which makes the animation play in reverse on every other iteration. Naturally, for the alternate value to take effect, the iteration count needs to have a value of 2 or higher.

The Animation’s Delay And Play State

Let’s add another two lines of code:

#sun.animate {
	-webkit-animation-name: sunrise;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 5s;
	-webkit-animation-play-state: running;
}

First, we introduce the animation-delay property, which does exactly what you would think: it allows you to delay the animation by a set amount of time. Interestingly, this property can have a negative value, which moves the starting point partway through the animation according to negative value. The animation-play-state property, which might be removed from the spec, accepts one of two possible values: running and paused. This value has limited practical use. The default is running, and the value paused simply makes the animation start off in a paused state, until it is manually played. You can’t specify a paused state in the CSS for an individual keyframe; the real benefit of this property becomes apparent when you use JavaScript to change it in response to user input or something else.

The Animation’s Fill Mode

We’ll add one more line to our code, the property to define the “fill mode”:

#sun.animate {
	-webkit-animation-name: sunrise;
	-webkt-animation-duration: 10s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 5s;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
}

The animation-fill-mode property allows you to define the styles of the animated element before and/or after the animation executes. A value of backwards causes the styles in the first keyframe to be applied before the animation runs. A value of forwards causes the styles in the last keyframe to be applied after the animation runs. A value of both does both. UPDATE: It seems that the animation-fill-mode property has been removed from the spec, or else was never there to begin with, so this property may not end up in the spec. Also, Chrome and Safari respond differently when it is used. Safari will only apply a value of “forwards” if there are exactly two keyframes defined. It always seems to use the 2nd keyframe as the “forwards” state, which is not how Chrome does it; Chrome uses the final keyframe, which seems to be correct behaviour. Additionally, I’ve confirmed that the most up to date WebKit nightly does not have this bug, so future versions of Safari will render this correctly.

Shorthand

Finally, the specification describes shorthand notation for animations, which combines six of the properties described above. This includes everything except animation-play-state and animation-fill-mode.

Some Notes On The Demo Page And Browser Support

As mentioned, the code in this article is for animating only a single element in the demo: the sun. To see the full code, visit the demo page. You can view all of the source together or use the tabs in the sidebar to view the code for individual elements in the animation. The demo does not use any images, and the animation does not rely on JavaScript. The sun, moon and cloud are all created using CSS3’s border-radius, and the only scripting on the page is for the tabs on the right and for the button that lets users start and reset the animation. If you view the page in anything but a WebKit browser, it won’t work. Firefox does not currently support keyframe-based animation, but support is expected for Firefox 5, and the -moz-based syntax for animations is supported in the latest Aurora build. So, to make the source code as future-proof as possible, I’ve included all of the -moz prefixes along with the standard syntax. Here are the browsers that support CSS3 keyframe animations:

Chrome 2+,
Safari 4+,
Firefox 5+,
iOS Safari 3.2+,
Android 2.1+.

Although no official announcement has been made, support in Opera is expected. There’s no word yet on support in IE.

The Future Of CSS: Experimental CSS Properties

1 year ago

by Christian Krammer in Network Posts

Despite contemporary browsers supporting a wealth of CSS3 properties, most designers and developers seem to focus on the quite harmless properties such as border-radius, box-shadow or transform. These are well documented, well tested and frequently used, and so it’s almost impossible to not stumble on them these days if you are designing websites.

But hidden deep within the treasure chests of browsers are advanced, heavily underrated properties that don’t get that much attention. Perhaps some of them rightly so, but others deserve more recognition. The greatest wealth lies under the hood of WebKit browsers, and in the age of iPhone, iPad and Android apps, getting acquainted with them can be quite useful. Even the Gecko engine, used by Firefox and the like, provides some distinct properties. In this article, we wisll look at some of the less known CSS 2.1 and CSS3 properties and their support in modern browsers.

Some explanation: For each property, I state the support: “WebKit” means that it is available only in browsers that use the WebKit engine (Safari, Chrome, iPhone, iPad, Android), and “Gecko” indicates the availability in Firefox and the like. Finally, certain properties are part of the official CSS 2.1. specification, which means that a broad range of browsers, even older ones, support them. Finally, a label of CSS3 indicates adherence to this specification, supported by the latest browser versions, such as Firefox 4, Chrome 10, Safari 5, Opera 11.10 and Internet Explorer 9.

WebKit-Only Properties

-webkit-mask

This property is quite extensive, so a detailed description is beyond the scope of this article and is certainly worth a more detailed examination, especially because it could turn out to be a time-saver in practical applications.

-webkit-mask makes it possible to apply a mask to an element, thereby enabling you to create a cut-out of any shape. The mask can either be a CSS3 gradient or a semi-transparent PNG image. An alpha value of 0 would cover the underlying element, and 1 would fully reveal the content behind. Related properties like -webkit-mask-clip, -webkit-mask-position and -webkit-mask-repeat rely heavily on the syntax of the ones from background. For more info, see the Surfin’ Safari blog and the link below.

Example

Image mask:

.element {
	background: url(img/image.jpg) repeat;
	-webkit-mask: url(img/mask.png);
}

Example

Gradient mask:

.element2 {
	background: url(img/image.jpg) repeat;
	-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

Further reading: Safari Developer Library

-webkit-text-stroke

One of the shortcomings of CSS borders is that only rectangular ones are possible. A ray of hope is -webkit-text-stroke, which gives text a border. Setting not only the width but the color of the border is possible. And in combination with color: transparent, you can create outlined text.

Examples

Assigns a blue border with a 2-pixel width to all <h1> headings:

h1 {-webkit-text-stroke: 2px blue}

Another feature is the ability to smooth text by setting a transparent border of 1 pixel:

h2 {-webkit-text-stroke: 1px transparent}

Creates text with a red outline:

h3 {
	color: transparent;
	-webkit-text-stroke: 4px red;
}

Further reading: Safari Developer Library

-webkit-nbsp-mode

Wrapping can be pretty tricky. Sometimes you want text to break (and not wrap) at certain points, and other times you don’t want this to happen. One property to control this is -webkit-nbsp-mode. It lets you change the behavior of the   character, forcing text to break even where it is used. This behavior is enabled by the value space.

Further reading: Safari Developer Library

-webkit-tap-highlight-color

This one is just for iOS (iPhone and iPad). When you tap on a link or a JavaScript clickable element, it is highlighted by a semi-transparent gray background. To override this behavior, you can set -webkit-tap-highlight-color to any color. To disable this highlighting, a color with an alpha value of 0 must be used.

Example

Sets the highlight color to red, with a 50% opacity:

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

Supported by: iOS only (iPhone and iPad).

Further reading: Safari Developer Library

zoom: reset

Normally, zoom is an Internet Explorer-only property. But in combination with the value reset, WebKit comes into play (which, funny enough, IE doesn’t support). It enables you to override the standard behavior of zooming on websites. If set with a CSS declaration, everything except the given element is enlarged when the user zooms on the page.

Further reading: Safari Developer Library

-webkit-margin-collapse

Here is a property with a quite limited practical use, but it is still worth mentioning. By default, the margins of two adjacent elements collapse, which means that the bottom distance of the first element and the top distance of the second element merge into a single gap.

The best example is two <p>s that share their margins when placed one after another. To control this behavior, we can use -webkit-margin-collapse, -webkit-margin-top-collapse or -webkit-margin-bottom-collapse. The standard value is collapse. The separate value stops the sharing of margins, which means that both the bottom margin of the first element and the top margin of the second are included.

Further reading: Safari Developer Library

-webkit-box-reflect

Do you remember the days when almost every website featured a reflection of either its logo or some text in the header? Thankfully, those days are gone, but if you’d like to make a subtle use of this technique for your buttons, navigation or other UI elements with CSS, then -webkit-box-reflect is the property for you.

It accepts the keywords above, below, left and right, which set where the reflection is drawn, as well as a numeric value that sets the distance between the element and its reflection. Beyond that, mask images are supported as well (see -webkit-mask for an explanation of masks). The reflection is created automatically and has no effect on the layout. Following elements are created using only CSS, and the second button is reflected using the -webkit-box-reflect-property.

Examples

This reflection would be shown under its parent element and have a spacing of 5 pixels:

-webkit-box-reflect: below 5px;

This reflection would be cast on the right side of the element, with no distance (0); additionally, a mask would be applied (url(mask.png)):

-webkit-box-reflect: right 0 url(mask.png);

Further reading: Safari Developer Library

-webkit-marquee

Here is another property that recalls the good ol’ days when marquees were quite common. Interesting that this widely dismissed property turns out to be be useful today, when we shift content on tiny mobile screens that would otherwise not be fully visible without wrapping.

The weather application by ozPDA makes great use of it. (If you don’t see shifting text, just select another city at the bottom of the app. WebKit browser required.)

Example

.marquee {
	white-space: nowrap;
	overflow:-webkit-marquee;
	width: 70px;
	-webkit-marquee-direction: forwards;
	-webkit-marquee-speed: slow;
	-webkit-marquee-style: alternate;
}

There are some prerequisites for the marquee to work. First, white-space must be set to nowrap if you want the text to be on one line. Also, overflow must be set to -webkit-marquee, and width set to something narrower than the full length of the text.

The remaining properties ensure that the text scrolls from left to right (-webkit-marquee-direction), shifts back and forth (-webkit-marquee-style) and moves at a slow rate (-webkit-marquee-speed). Additional properties are -webkit-marquee-repetition, which sets how many iterations the marquee should pass through, and -webkit-marquee-increment, which defines the degree of speed in each increment.

Further reading: Safari Developer Library

Gecko-Only Properties

font-size-adjust

Unfortunately, this useful CSS3 property is supported only by Firefox at the moment. We can use it to specify that the font size for a given element should relate to the height of lowercase letters (x-height) rather than the height of uppercase letters (cap height). For example, Verdana is much more legible at the same size than Times, which has a much shorter x-height. To compensate for this behavior, we can adjust the latter with font-size-adjust.

This property is particularly useful in CSS font stacks whose fonts have different x-heights. Even if you’re careful to use only similar fonts, font-size-adjust can provide a solution when problems arise.

Example

If Verdana is not installed on the user’s machine for some reason, then Arial is adjusted so that it has the same aspect ratio as Verdana, which is 0.58 (at a font size of 12px, differs on other sizes).

p {
	font-family:Verdana, Arial, sans-serif;
	font-size: 12px;
	font-size-adjust: 0.58;
}

Supported by: Gecko.

Further reading: Mozilla Developer Network

image-rendering

A few years ago, images that were not displayed at their original size and were scaled by designers, could appear unattractive or just plain wrong in the browser, depending on the size and context. Nowadays, browsers have a much better algorithm for displaying resized images, however, it’s great to have a full control over the ways your images will be displayed when scaled, especially with responsive images becoming a de facto standard in responsive Web designs.

This Gecko-specific property is particularly useful if you have an image with sharp lines and want to maintain them after resizing. The relevant value would be -moz-crisp-edges. The same algorithm is used at optimizeSpeed, whereas auto and optimizeQuality indicate the standard behavior (which is to resize elements with the best possible quality). The image-rendering property can also be applied to <video> and <canvas> elements, as well as background images. It is a CSS3 property, but is currently supported only by Firefox.

It’s also worth mentioning -ms-interpolation-mode: bicubic, although it is a proprietary Internet Explorer property. Nevertheless, it enables Internet Explorer 7 to render images at a much higher quality after resizing which is useful because by default this browser handles such tasks pretty poorly.

Supported by: Gecko.

Further reading: Mozilla Developer Network

-moz-border-top-colors

This property could be filed under ‘eye-candy’. It allows you to assign different colors to borders that are wider than 1 pixel. Also available are -moz-border-bottom-colors, -moz-border-left-colors and -moz-border-right-colors.

Unfortunately, there is no condensed version like -moz-border-colors for this property, so the border property must be set in order for it to work, whereas border-width should be the same as the number of the given color values. If it is not, then the last color value is taken for the rest of the border.

Example

Below, the element’s border would have a standard color of orange applied to the left and right side (because -moz-border-left-colors and -moz-border-right-colors are not set). The top and bottom borders have a kind of gradient, with the colors red, yellow and blue.

div {
	border: 3px solid orange;
	-moz-border-top-colors: red yellow blue;
	-moz-border-bottom-colors: red yellow blue;
}

Supported by: Gecko.

Further reading: Mozilla Developer Network

Mixed Properties

-webkit-user-select and -moz-user-select

There might be times when you don’t want users to be able to select text, whether to protect it from copying or for another reason. One solution is to set -webkit-user-select and -moz-user-select to none. Please use this property with caution: since most users are looking for information that they can copy and store for future reference, this property is neither helpful nor effective. In the end, the user could always look up the source code and take the content even if you have forbidden the traditional copy-and-paste. We do not know why this property exists in both WebKit and Gecko browsers.

Supported by: WebKit, Gecko.

Further reading: Safari Developer Library, Mozilla Developer Network

-webkit-appearance and -moz-appearance

Ever wanted to easily camouflage an image to look like a radio button? Or an input field to look like a checkbox? Then appearance will come in handy. Even if you wouldn’t always want to mask a link so that it looks like a button (see example below), it’s nice to know that you can do it if you want.

Example

a {
	-webkit-appearance: button;
	-moz-appearance: button;
}

Supported by: WebKit, Gecko.

Further reading: Safari Developer Library, Mozilla Developer Network

text-align: -webkit-center/-moz-center

This is one property (or value, to be exact) whose existence is quite surprising. To center a block-level element, one would usually set margin to 0 auto. But you could also set the text-align property of the element’s container to -moz-center and -webkit-center. You can align left and right with -moz-left and -webkit-left and then -moz-right and -webkit-right, respectively.

Supported by: WebKit, Gecko.

Further reading: Safari Developer Library, Mozilla Developer Network

CSS 2.1. Properties

counter-increment

How often have you wished you could automatically number an ordered list or all of the headings in an article? Unfortunately, there is still no CSS3 property for that. But let’s look back to CSS 2.1, in which counter-increment provides a solution. That means it’s been around for several years, and even supported in Internet Explorer 8. Did you know that? Me neither.

In conjunction with the :before pseudo-element and the content property, counter-increment can add automatic numbering to any HTML tag. Even nested counters are possible.

Example

For numbered headings, first reset the counter to start at 1:

body {counter-reset: thecounter}

Every <h1> would get the prefix “Section,” including a counter that automatically increments by 1 (which is default and can be omitted), where thecounter is the name of the counter:

.counter h1:before {
	counter-increment: thecounter 1;
	content:"Section"counter(thecounter)":";
}

Example

For a nested numbered list, the counter is reset and the automatic numbering of <ol> is switched off because it features no nesting:

ol {
    counter-reset: section;
    list-style-type: none;
}

Then, every <li> is given automatic incrementation, and the separator is set to be a point (.), followed by a blank.

li:before {
    counter-increment: section;
    content: counters(section,".")"";
}

<ol>
	<li>item</li>			<!-- 1 -->
	<li>item				  <!-- 2 -->
		<ol>
			<li>item</li>	<!-- 1.1 -->
			<li>item</li>	<!-- 1.2 -->
		</ol>
	</li>
	<li>item</li>			<!-- 3 -->

<ol>

Supported by: CSS 2.1., all modern browsers, IE 7+.

Further reading: W3C

quotes

Are you tired of using wrong quotes just because your CMS doesn’t know how to properly convert them to the right ones? Then start using the quotes property to set them how you want. This way, you can use any character. You would then assign the quotes to the desired element using the :before and :after pseudo-elements. Unfortunately, the otherwise progressive WebKit browsers don’t support this property, which means no quotes are shown at all.

Example

The first two characters determine the quotes for the first level of a quotation, the last two for the second level, and so on:

q {
	quotes: '«' '»' "‹" "›";
}

These two lines assign the quotes to the selected element:

q:before {content: open-quote}
q:after  {content: close-quote}

So, <p><q>This is a very <q>nice</q> quote.</q></p> would give us:
«This is a very ‹nice› quote.»

Supported by: CSS 2.1., all browsers except WebKit, even IE 7+.

Further reading: W3C

Question: To add the character directly, does the CSS document have to have a UTF-8 character set? That’s a tough one. Unfortunately, I can’t give a definitive answer. My experimentation has shown that no character set has to be set for the quotes property to work properly. However the utf-8 character set doesn’t work because it shows “broken” characters (for example, “»”). With the iso-8859-1 character set, everything works fine.

This is how the W3C describes it: “While the quotation marks specified by ‘quotes’ in the previous examples are conveniently located on computer keyboards, high-quality typesetting would require different ISO 10646 characters.”

CSS3 Properties You May Have Heard About But Can’t Remember

To round out things, let’s go over some CSS3 properties that are not well known and maybe not as appealing as the classic ones border-radius and box-shadow.

text-overflow

Perhaps you’re familiar with this problem: a certain area is too small for the text that it contains, and you have to use JavaScript to cut the string and append “…” so that it doesn’t blow out the box.

Forget that! With CSS3 and text-overflow: ellipsis, you can force text to automatically end with “…” if it is longer than the width of the container. The only requirement is to set overflow to hidden. Unfortunately, this is not supported by Firefox but will hopefully be implemented in a coming release.

Example

div {
	width: 100px;
	text-overflow: ellipsis;
}

Supported by: CSS 3, all browsers except Firefox, even IE6+.

Further reading: W3C

word-wrap

With text in a narrow column, sometimes portions of it are too long to wrap correctly. Link URLs especially cause trouble. If you don’t want to hide the overflowing text with overflow: hidden, then you can set word-wrap to break-word, which causes it to break when it reaches the limit of the container.

Example

div {
	width: 50px;
	word-wrap: break-word;
}

Supported by: CSS 3, all browsers, even IE6+.

Further reading: W3C

resize

If you use Firefox or Chrome, then you must have noticed that text areas by default have a little handle in the bottom-right corner that lets you resize them. This standard behavior is achieved by the CSS3 property resize: both.

But it’s not limited to text areas. It can be used on any HTML element. The horizontal and vertical values limit the resizing to the horizontal and vertical axes, respectively. The only requirement is that overflow be set to anything other than visible.

Supported by: CSS3, all the latest browsers except Opera and Internet Explorer.

Further reading: Safari Developer Library

background-attachment

When you assign a background image to an element that is set to overflow: auto, it is fixed to the background and doesn’t scroll. To disable this behavior and enable the image to scroll with the content, set background-attachment to local.

Supported by: CSS 3, all the latest browsers except Firefox.

Further reading: Safari Developer Library

text-rendering

With more and more websites rendering fonts via the @font-face attribute, legibility becomes a concern. Problems can occur particularly at small font sizes. While there is still no CSS property to control the subtle details of displaying fonts online, you can enable kerning and ligatures via text-rendering.

Gecko and WebKit browsers handle this property quite differently. The former enables these features by default, while you have to set it to optimizeLegibility in the latter.

Supported by: CSS3, all WebKit browsers and Firefox.

Further reading: Mozilla Developer Network

transform: rotateX/transform: rotateY

If you’ve already dived into CSS3 and transformations a bit, then you’re probably familiar with transform: rotate(), which rotates an element around its z-axis.

But did you know that it is also possible to spin it “into the deep” (i.e. around its x-axis and y-axis)? These transformations are particularly useful in combination with -webkit-backface-visibility: hidden, if you want to rotate an element and reveal another one at its back. This technique is described by Andy Clarke in his latest book, Hardboiled Web Design, and it can be seen in action on a demo page.

Example

If you hover over the element, it will turn by 180°, revealing its back:

div:hover {
	transform: rotateY(180deg);
}

Quick tip: To just mirror an element, you can either set transform to rotateX(180deg) (and respectively rotateY) or set transform to scaleX(-1) (and respectively scaleY).

Supported by: CSS3, only WebKit browsers, in combination with -webkit-backface-visibility only Safari and iOS (iPhone and iPad).

Further reading: Safari Developer Library (transform: rotate, -webkit-backface-visibility)

Some Last Words

As you hopefully have seen, there are many unknown properties that range from being nice to hav to being very useful. Many of them are still at an experimental stage and may never leave it or even be discarded in future browser releases. Others will hopefully be adopted by all browser manufacturers in coming versions.

While it is hard to justify using some of them, the WebKit-specific ones are gaining more and more importance with the success of the iOS devices and Android. And of course some CSS3 properties are more or less ready to be used now.

And if you don’t like vendor-specific properties, you can see them as experiments that still could be implemented in the code to improve the user experience for users browsing with the modern browsers. By the way, CSS validator from the W3C now also supports vendor-specific properties, which result in warnings rather than errors.

Happy experimenting!

(al)

css

CSS Cheat Sheet

3 years ago

by achmatim in web development

Cheat sheet biasanya merupakan satu atau beberapa halaman yang berisi rangkuman dari sesuatu yang cukup panjang. Cheat sheet umumnya dapat dicetak kedalam satu atau beberapa halaman. Dengan kata lain, cheat sheet dalam bahasa awam sebenarnya adalah sebuah kertas contekan, dalam arti positif. Cheat sheet dapat mempermudah kita dalam mempelajari sesuatu karena kita dapat mencarinya dengan mudah, tanpa harus membuka sejumlah halaman buku. Bagi developer atau programmer, cheat sheet juga berguna sebagai referensi dan mempercepat dalam melakukan pekerjaannya. Dia (developer, programmer) dapat mencari fungsi-fungsi tertentu dari bahasa pemrograman yang digunakannya dengan cepat dalam satu halaman saja, tentu lebih cepat jika dibandingkan harus membuka manual atau buku dengan begitu banyak halaman.

Salah satu cheat sheet yang banyak tersedia di internet, adalah CSS Cheat sheet. Cheat sheet tersebut biasanya berisi semua perintah-perintah CSS termasuk properties dan value yang dimilikinya. Terkadang di dalam CSS Cheat sheet juga disertai beberapa contoh singkat. Saat ini banyak situs yang membuat dan menyediakan CSS cheat sheet dan umumnya dapat didownload secara gratis. Masing-masing memiliki versi, tampilan dan bentuk tersendiri, namun pada dasarnya isinya sama.

Berikut ini beberapa contoh CSS cheat sheet yang tersedia di internet.

(more…)

Popularity: 1% [?]

cheat sheet css

Membuat Menu CSS dengan Dreamweaver

4 years ago

by achmatim in Dreamweaver, materi, mengajar, web development

Menu atau navigasi di sebuah website memegang peranan yang sangat penting. Fungsi utamanya adalah memudahkan pengunjung untuk mendapatkan informasi yang diinginkan. Dengan menu atau navigasi yang baik, pengunjung dapat dengan mudah berpindah dari satu halaman ke halaman yang lainnya. Sebaliknya, navigasi yang buruk akan membingungkan pengunjung, sehingga bisa menyebabkan pengunjung “tersesat” dan jika pengunjung tersebut tidak dapat menemukan “jalan pulang” kembali ke halaman awal, maka bisa dipastikan akan langsung meninggalkan website kita (close).

Banyak bentuk dan teknik yang dapat digunakan untuk membuat menu atau navigasi di halaman web. Beberapa diantaranya menggunakan tabel, menggunakan images, menggunakan object flash, dan juga menggunakan CSS. Masing-masing teknik memiliki kelebihan dan kekurangan masing-masing.

Dalam tutorial ini akan disampaikan bagaimana membuat menu (navigasi) dengan menggunakan CSS. Salah satu keuntungan menu menggunakan CSS adalah dapat ditampilkan dengan cepat oleh browser dan juga hampir semua browser dapat menampilkannya (support-all-browsers).

Download File : seri-tutorial-dreamweaver-8-membuat-menu-dengan-css (PDF – 1,15 MB) , Link alternatif.

Semoga bermanfaat

Popularity: 14% [?]

css design web download dreamweaver menu tutorial

Posts tagged css

The Principles Of OOCSS

Separation of Structure From Skin

Separation of Containers and Content

A Real-World Example

The Media Object

The Benefits Of OOCSS

Faster Websites

Maintainable Stylesheets

Points Worth Noting

You Can Still Use IDs

Dealing With Smaller Projects

Some Guidelines For Implementation

Follow Nicole Sullivan’s Work

Conclusion

Getting Started

Adjusting To The Right Size

The Header

The Missing Link

Side By Side

Just For Fun

Preview Made Easy

A Missed Opportunity

The Future

Websites Designed Well For Print

In Conclusion

Responsive Design Techniques

Responsive Images, Responsive Videos

Responsive Email Newsletters

Responsive Design Tools

Responsive Design Templates

Responsive Design Frameworks

Responsive Design Workflow and Strategies

Discussions and Points of View on Responsive Design

Further Resources

Last Click

Would you like to see more round-ups like this one on SM?

HTML and CSS Tools

JavaScript Tools

Grids

Last Click

Related Articles

A Simple Animated Landscape Scene

The Keyframe @ Rule

The Keyframe Selectors

The Keyframes That Animate the Sun

Associating The Animation Name With An Element

The Animation’s Duration And Timing Function

The Animation’s Iteration Count And Direction

The Animation’s Delay And Play State

The Animation’s Fill Mode

Shorthand

Some Notes On The Demo Page And Browser Support

Further Reading

WebKit-Only Properties

-webkit-mask

-webkit-text-stroke

-webkit-nbsp-mode

-webkit-tap-highlight-color

zoom: reset

-webkit-margin-collapse

-webkit-box-reflect

-webkit-marquee

Gecko-Only Properties

font-size-adjust

image-rendering

-moz-border-top-colors

Mixed Properties

-webkit-user-select and -moz-user-select

-webkit-appearance and -moz-appearance

text-align: -webkit-center/-moz-center

CSS 2.1. Properties

counter-increment

quotes

CSS3 Properties You May Have Heard About But Can’t Remember

text-overflow

word-wrap

resize

background-attachment

text-rendering