List of Articles
Animated GIF Character From Vera & John Online Casino
In:
Note: New project
Preventing Reflow
In:
I saw this in my timeline yesterday:
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…
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.
Reuse or not reuse…
In:
I didn’t have much to do today so I thought I’d take that bait:
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:
…
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.
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.
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).
Atomic CSS on Steroids
In:
Update:
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.
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.
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…
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:
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.
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:
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.
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.
…
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.
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
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.
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.
The very latest new new way to do “clearfix”
In:
Who would think there is still something to write about clearfix? 🙂
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:
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.
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.
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
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.
Should you use padding or margin to create space between boxes?
In:
Last week I posted this CSS “tip” on Twitter…
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
.
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.
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.
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
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.
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…
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 withfloat:left
. Even though there is nothing wrong with this approach, it inspired me to take this opportunity to discuss directionality for layout.…
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.
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.
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.
html5 elements and surrogate div
In:
TL;DR Check the demos: Nesting versus Wrapping and HTML5 without Javascript
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
andheight
values, we can display content outside of the content box, over borders.
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.
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.
Glossary and Table Layout
In:
Today I ran into an old post from Bruce Lawson (via @necolas).
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.
…
The CSS position property
In:
This property applies to all elements. It has five possible values…
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…
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.
clearfix Reloaded + overflow:hidden Demystified
In:
clearfix and
overflow:hidden
may be the two most popular techniques to clear floats without structural markup.
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…
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.
Block Formatting Contexts
In:
A block formatting context is a box that satisfies at least one of the following…
Everything you Know about Clearfix is Wrong
In:
Clearfix works like this…
base.css versus reset.css
In:
For a long time, the very first line in my style sheets was
* {margin:0;padding:0;}
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.
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 tried999999
, but that didn’t help either.
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.
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…
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…
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.
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…
How to use sprites with my Image Replacement technique
In:
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.
In:
It is Aaron Gustafson’s iIR technique that inspired this article…
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
dt
s (the questions) “toggles” the associateddd
s (the answers).
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 🙂
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.
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…
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.
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.
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:
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.
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!