Over 3 years ago I wrote "The very latest new new way to do “clearfix”. Before that, I had written "clearfix Reloaded + overflow:hidden Demystified" on the YUIBlog. And here I am, writing about clearfix for the third time!
My previous recommendation for modern browsers was to use:
This article is not about designing effective carousels but about styling them effectively. In other words, this is not about UI design but CSS constructs — how carousel items flow, their positioning and dimensions.
When it comes to CSS, I believe that the sacred principle of “separation of concerns” (SoC) has lead us to accept bloat, obsolescence, redundancy, poor caching, and more. Now, I’m convinced that the only way to improve how we author style sheets is by moving away from this principle.
-webkit-line-clamp is an unsupported WebKit property that limits the number of lines of text displayed in a block element. In order to achieve the effect, it needs to be combo-ed with a couple of other exotic WebKit properties.
This is a different take on Responsive Web design. This article discusses how we can better embrace what the Web is about by ignoring the big elephant in the room; that is, how we can rely on media queries and breakpoints without any concern for devices.
I believe everybody knows what skip links are and what they are used for. If you don’t, you can check this article that does a recap and explains a short coming associated to the most common technique.
This is a simple trick to overlay a grid or a mock-up over a page you’re styling (in WebKit). It will also allow you to edit content directly in the browser to see how your layout behaves depending on various lines of text.
The Ken Burns effect is a popular name for a type of panning and zooming effect used in video production from still imagery.
The name derives from extensive use of the technique by American documentarian Ken Burns.
This is an article I meant to write for a long time, but due to the hysteria about IE6 I thought it would be considered “provocative” and that people would think I’m fishing for comments. But as the end is near, I think it is...
I recently came across a horizontal navigational menu with right-aligned links. As you might expect, it was a list element with float:right and the list items with float:left. Even though there is nothing wrong with this approach, it inspired me to take this opportunity to discuss directionality for layout.
In 2002, Mark Newhouse published the article “Taming Lists”, a very interesting piece in which he explained how to create custom list markers using pseudo-elements. Almost a decade later, Nicolas Gallagher came up with the technique pseudo background-crop which uses pseudo-elements with a sprite.
These tricks will help you achieve designs without resorting to the use of images, CSS3 gradient or extraneous markup. By collapsing boxes with zero line-height and height values, we can display content outside of the content box, over borders.
This article discusses the creation of a base styles sheet for WebKit-based browsers. A companion table lists all rules found in the UA’s styles sheet plus rules from a reset, a base and a fonts’ styles sheet.
Many ecommerce sites, social networking services, and online communities include rating or assessment features. Soliciting people’s opinion has even become a business model; there are now sites dedicated to rating products, services, businesses, and more.
Did you ever want to resize a video on the fly, scaling it as you would an image? Using intrinsic ratios for video, you can. This technique allows browsers to determine video dimensions based on the width of their containing block.
A few weeks ago I was called to fix a layout issue. A modal window would not show, so I used Firebug to style it using position:relative;z-index:9999 (because I know people use crazy values). It still didn’t work; so I tried 999999, but that didn’t help either.
There are many CSS layouts out there. Some rely on AP (Absolutely Positioned) elements, others use floats. The former method is considered bad practice for its lack of flexibility while the latter is a powerful solution in building robust layouts.
Years ago, I wrote an article about creating horizontal CSS dropdown menus. This menu didn’t look nice but it worked very well across browsers. I also believe it was the first one to address an issue related to links hidden by the CSS "position" property. As...
It is easier for keyboard users to navigate through long nested lists (mainly navigation menus) when these are "hidden" through the use of display:none; but unfortunately for these users, most web designers/developers choose other techniques to make sure all links are exposed to search engines and assistive devices. For this...
Microsoft tells us that One of the most common operations performed in a Web page is to detect the browser type and version. […]. Conditional comments offer certain advantages over scripted browser detection techniques and are also easier to use.