HTML

• 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:

• Google Fonts, Google Analytics, and performance

  Onboarding Google fonts and analytics come at a price. Looking at perf results, I decided to drop both.

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

• My take on Responsive Line Breaks

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

• Did we lose track of the big picture?

  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.

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

• html5 elements and surrogate div

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

• Glossary and Table Layout

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

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

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

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

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

• Opening Popup Windows with no extra markup

  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.

• 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!