Tab Panels have been my pet peeve for years [1], mostly because of the arguments people come up with to rationalize the use of their companion jump links.
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.
This is a post about “recommendations” that I consider bad practices (I am less concerned by their methods than I am about their adoption.) This is my short list:
This is a JavaScript-free solution to create a "sliding" marker next to or behind links in vertical or horizontal menus. Something called JQuery MagicLine Navigation on CSS-TRICKS.
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.
...
This is based on a clever technique that justify-aligns boxes in their container. A fellow named Jason came up with the original trick; I’m only hacking it to achieve a different goal.
-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.
http://dropshado.ws/post/1015351370/webkit-line-clamp
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.
The text-indent property specifies the indentation of the first line of text in a block container.
http://www.w3.org/TR/CSS2/text.html#indentation-prop
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.
It seems to me that we are slowly switching from publishing content for the Web, to making content accessible to Screen-Readers (SR) - from targeting users, to focusing on devices and modern browsers.
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.
http://en.wikipedia.org/wiki/Ken_Burns_effect
On April 28, 2011, I published a short CSS quiz via SurveyMonkey. This article discusses the comments I received, the responses, the results, and more.
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.
...
I started thinking of data-uri as a mean to reduce HTTP requests and file size. Then I thought it could be used as a hack to delay the execution of “downloaded” scripts.
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.
There’s a balance between creating a clean, simple visual design and providing accessible content and functionality. One common solution is to provide text to screen readers that is hidden via CSS.
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.
...
“What? Another “Equal Height Columns” article? Enough already!”. If this is what you think, then think again because this solution is different. It does not rely on any of the usual tricks.
This article is about containing floats without structural markup. It sheds some light on the different methods commonly used and discusses a new technique…
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...
I am using an Ordered List (ol) as I believe it is the most appropriate HTML element to use since we are dealing with a list of code lines for which order matters…
This is about replacing a few images with a single one to reduce HTTP requests; but rather than positioning a background image, we are positioning the img element used with this technique.
This is about using a Definition List and the DOM to create a nice FAQ page where clicking on the dts (the questions) "toggles" the associated dds (the answers).
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.
Popup windows are a hot topic among the web designers' community. People who are new to the trade struggle to customize them while seasoned web designers argue about their very use.
This technique is very versatile. Make sure you read the entire article to find out about the many different ways to implement the method. Also, I wrote a few other articles based on this solution:
Many beginning web designers fail to properly understand inline elements, so when it comes to assembling a sliced image using HTML, they mostly rely on their favorite tool… Da table!
