CSS

• Preventing Reflow

  I saw this in my timeline yesterday:

• Opinions of Leaders Considered Harmful

  Note: this started as a rebuttal to Jeffrey Zeldman’s piece (Kiss My Classname) but I thought there was more to it, hence the title…

• Tab Panel, the right way…

  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.

• Reuse or not reuse…

  I didn’t have much to do today so I thought I’d take that bait:

• The very latest clearfix reloaded

  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…

• Pure CSS Tab Panel

  Most Tab Panel widgets rely on a list of jump links followed by “sections”. These links are styled as tabs, while the sections are styled as panels.

• What nobody tells you about "will-change"

  TL;DR: do not use will-change until all modern browsers are onboard with it (unless you know what you’re doing).

• Atomic CSS on Steroids

  Update:

• Styling Effective Carousels

  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.

• Managing Stacking Contexts in a “hostile” environment

  Note: this is a proposal I recently wrote for Yahoo!. It has been edited for external audience.

• Progressive Enhancement

  In [Designing an Effective Donate Form](http://bradfrostweb.com/blog/post/designing-an-effective-donate-form/) Brad Frost recommends using buttons in lieu of radio buttons, citing a [tweet from Luke Wroblewski](https://twitter.com/lukew/statuses/486521897367007232)…

• Common practices do not necessarily mean best practices

  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:

• Menus with a sliding marker

  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.

• Sprites without JS or min-device-pixel-ratio

  This post is about serving a Scalable Vector Graphics (SVG) file in lieu of a “high-resolution” image (@2x). It is an alternative to this:

• Challenging CSS Best Practices

  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…

• How to make 2 opposite boxes wrap nicely

  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.

• How to (kinda) “mimic” -webkit-line-clamp in other browsers

  -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….

• Lib and learn?

  Below is a tweet I posted a month ago. It’s mostly a knee jerk reaction to a couple of experiences I had just had.

• My take on Responsive Line Breaks

  It is this tweet from Mathias Bynens that made me look into an article titled Responsive Line Breaks.

• The very latest new new way to do "clearfix"

  Who would think there is still something to write about clearfix? 🙂

• My thoughts about the latest Image Replacement techniques

  If you’re in the business of building web sites, chances are that you heard about the latest Image Replacement (IR) techniques:

• Device-Agnostic Approach To Responsive Web Design

  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…

• A "row" to use with any grid system

  This is a technique to style a box as a row. A block that expands to fill its container, contains floats, and more.

• Indentation and inline elements

  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

• Skip Links revisited

  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.

• Should you use padding or margin to create space between boxes?

  Last week I posted this CSS “tip” on Twitter…

• Helping users to focus on one form control at a time

  This simple CSS trick can be used to create a mask outside the border box of any focus-able element. It relies on outline-offset.

• Speed up CSS prototyping

  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…

• A Ken Burns effect with CSS

  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

  …

• CSS Quiz

  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.

• Thank you Internet Explorer

  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…

• Direction-friendly Navigation Bar

  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…

• Positioning an animated gif over an image

  It is a tweet from Ryan Seddon that gave me the idea to use a <img> element with a background image to reduce the weight of large animated (gif) images.

• What else can we do with data-uri?

  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.

• Styling Elements With Glyphs, Sprites and Pseudo-Elements

  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

• html5 elements and surrogate div

  TL;DR Check the demos: Nesting versus Wrapping and HTML5 without Javascript

• CSS Border Tricks with Collapsed Boxes

  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.

• Clip Your Hidden Content For Better Accessibility

  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.

• Use efficient CSS selectors

  Using descendant selectors is inneficient, but when your key selector (the rightmost selector) is a ID selector, then things get worse.

• Glossary and Table Layout

  Today I ran into an old post from Bruce Lawson (via @necolas).

• Styling for WebKit-based browsers

  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

• The CSS position property

  This property applies to all elements. It has five possible values…

• CSS Quick Tip – Inline Boxes with Bottom Alignment

  The challenge is to keep a submit button at the bottom of a line box, aligned with form controls positioned below their label…

• Equal Height Column Layouts with Borders and Negative Margins in CSS

  “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.

• clearfix Reloaded + overflow:hidden Demystified

  clearfix and overflow:hidden may be the two most popular techniques to clear floats without structural markup.

• Another look at enclosing floats inside containers

  This article is about containing floats without structural markup. It sheds some light on the different methods commonly used and discusses a new technique…

• Developing an Accessible Star Ratings Widget

  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.

• Block Formatting Contexts

  A block formatting context is a box that satisfies at least one of the following…

• Everything you Know about Clearfix is Wrong

  Clearfix works like this…

• base.css versus reset.css

  For a long time, the very first line in my style sheets was * {margin:0;padding:0;}

• Responsive videos

  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…

• Find out how elements stack and start using low z-index values

  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…

• A css layout that does not rely on div, float, clear nor structural hack!

  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…

• Pure CSS Dropdown Menus, take II

  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…

• A “Keyboard-friendly” Menu.

  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…

• Using CSS to style thumbnails and captions

  I think a Definition List is the most appropriate element to use here as we are dealing with a list of elements that are paired.

• Using CSS to style a code listing

  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…

• How to use sprites with my Image Replacement technique

  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.

• Stacking two images in one single IMG element makes overlay transparency easy.

  It is Aaron Gustafson’s iIR technique that inspired this article…

• A perfect faq page

  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).

• Using the DOM to create clean “graphic” Menus

  Years ago I asked if we needed table markup to contain images used in menus; today I’m wondering if we even need markup for those images 🙂

• Using the DOM to automate my Image Replacement technique

  This is about relying on Javascript to implement the method without polluting the markup with img elements.

• Using the DOM with my Image Replacement technique to create Drop Caps on the fly

  Thanks to Michael from Valley Web Designs for suggesting I try the technique to create Drop Caps…

• Conditional Comments

  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.…

• Image Placement vs. Image Replacement

  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:

• Do we need tables?

  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!