List of Articles

    1. Animated GIF Character From Vera & John Online Casino

      In:

      Note: New project 

        1. Preventing Reflow

          In:

          I saw this in my timeline yesterday:

        1. Opinions of Leaders Considered Harmful

          In:

          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…

        1. Tab Panel, the right way…

          In:

          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.

        1. Reuse or not reuse…

          In:

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

        1. The very latest clearfix reloaded

          In:

          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:

          …

        1. Pure CSS Tab Panel

          In:

          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.

        1. Drawing with a Grid

          In:

          Now that I have a bit more time on my hands, I picked up drawing again. The first piece I did was for my son’s birthday.

        1. What nobody tells you about “will-change”

          In:

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

        1. Atomic CSS on Steroids

          In:

          Update:

        1. Styling Effective Carousels

          In:

          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.

        1. Managing Stacking Contexts in a “hostile” environment

          In:

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

        1. Progressive Enhancement

          In:

          In Designing an Effective Donate Form Brad Frost recommends using buttons in lieu of radio buttons, citing a tweet from Luke Wroblewski…

        1. Common practices do not necessarily mean best practices

          In:

          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:

        1. Menus with a sliding marker

          In:

          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.

        1. Sprites without JS or min-device-pixel-ratio

          In:

          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:

        1. Google Fonts, Google Analytics, and performance

          In:

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

        1. Challenging CSS Best Practices

          In:

          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.

          …

        1. How to make 2 opposite boxes wrap nicely

          In:

          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.

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

          In:

          -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

        1. Lib and learn?

          In:

          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.

        1. My take on Responsive Line Breaks

          In:

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

        1. The very latest new new way to do “clearfix”

          In:

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

        1. My thoughts about the latest Image Replacement techniques

          In:

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

        1. Device-Agnostic Approach To Responsive Web Design

          In:

          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.

        1. A “row” to use with any grid system

          In:

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

        1. Indentation and inline elements

          In:

          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

        1. Skip Links revisited

          In:

          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.

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

          In:

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

        1. Helping users to focus on one form control at a time

          In:

          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.

        1. Did we lose track of the big picture?

          In:

          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.

        1. Speed up CSS prototyping

          In:

          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.

        1. A Ken Burns effect with CSS

          In:

          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

        1. CSS Quiz

          In:

          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.

        1. Thank you Internet Explorer

          In:

          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…

        1. Direction-friendly Navigation Bar

          In:

          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.

          …

        1. Positioning an animated gif over an image

          In:

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

        1. What else can we do with data-uri?

          In:

          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.

        1. Styling Elements With Glyphs, Sprites and Pseudo-Elements

          In:

          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.

        1. html5 elements and surrogate div

          In:

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

        1. CSS Border Tricks with Collapsed Boxes

          In:

          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.

        1. Clip Your Hidden Content For Better Accessibility

          In:

          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.

        1. Use efficient CSS selectors

          In:

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

        1. Glossary and Table Layout

          In:

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

        1. Styling for WebKit-based browsers

          In:

          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.

          …

        1. The CSS position property

          In:

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

        1. CSS Quick Tip – Inline Boxes with Bottom Alignment

          In:

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

        1. Equal Height Column Layouts with Borders and Negative Margins in CSS

          In:

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

        1. clearfix Reloaded + overflow:hidden Demystified

          In:

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

        1. Another look at enclosing floats inside containers

          In:

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

        1. Developing an Accessible Star Ratings Widget

          In:

          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.

        1. Block Formatting Contexts

          In:

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

        1. Everything you Know about Clearfix is Wrong

          In:

          Clearfix works like this…

        1. base.css versus reset.css

          In:

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

        1. Responsive videos

          In:

          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.

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

          In:

          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.

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

          In:

          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.

        1. Pure CSS Dropdown Menus, take II

          In:

          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…

        1. A “Keyboard-friendly” Menu.

          In:

          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…

        1. Using CSS to style thumbnails and captions

          In:

          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.

        1. Using CSS to style a code listing

          In:

          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…

        1. How to use sprites with my Image Replacement technique

          In:

            • #tricks

          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.

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

          In:

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

        1. A perfect faq page

          In:

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

        1. Using the DOM to create clean “graphic” Menus

          In:

          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 🙂

        1. Using the DOM to automate my Image Replacement technique

          In:

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

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

          In:

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

        1. Conditional Comments

          In:

          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.

        1. Opening Popup Windows with no extra markup

          In:

          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.

        1. Image Placement vs. Image Replacement

          In:

          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:

        1. uri string and “parameters”

          In:

          This document will show how to pass name and value pairs from one page to another using the browser’s built-in Location object.

      1. Do we need tables?

        In:

        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!