Tiffany B. Brown

Posts in: CSS

Faux placeholder clearing with CSS
Maybe you’re like me, and you’re not crazy about the way the placeholder attribute works for text fields. I think the placeholder text should clear once the input has focus. Instead, the text only clears after the user starts typing. The good news is that we can modify this behavior without (completely*) compromising accessibility by […] [9 Dec 2013]
Range controls and padding in IE10+
While working on a video player for a forthcoming book, I noticed a peculiar spacing issue with <input type=”range”> that affected the layout of this player. Internet Explorer does something a little weird that no other browser does: it throws several pixels of padding along the top and bottom of the range element by default […] [15 Oct 2013]
CSS 3D Transforms on Dev.Opera
Though I am no longer with Opera, I do plan to keep contributing to their Dev.Opera site. As part of the launch of Opera 15 beta for desktop computers, they recently published a piece I wrote about CSS 3D transforms. Have a read, and feel free to ask questions or leave comments on their site. [18 Jun 2013]
Media queries in SVG and background-size
By now, you probably know it’s possible to use media queries in SVG. As with media queries in HTML documents, you can use CSS to adjust layout — or in this case, things like stroke and fill — based on the width of the document view port. With SVG documents, of course, the viewport is […] [20 Apr 2013]
Smoothing jagged edges on transformed objects in Firefox
Transformed elements in Firefox sometimes appear with jagged edges. The anti-aliasing isn’t as smooth as what you find in Webkit-based browsers or Internet Explorer (Figure 1). Figure 2. An image with transform: rotateX(-45deg);. View a larger version. The good news is that there’s an easy fix for this. It’s essentially the fix used to address […] [13 Apr 2013]
Why doesn’t my scale3d() / scaleZ() transform work?
One of the trickier parts of 3D transforms is understanding how the scaleZ() and scale3d() functions work. When applied to an element, they will often appear to have no effect. But then at other times, or in other combinations, they will. Confusing right? So what’s going on? Well, it has to do with transformation matrices, […] [24 Feb 2013]
WebKit is not a cure-all
Let me say this up front: I don’t know what Opera has up its sleeve. I’m sure you’ve heard some things. But it’s not hard to find people who think everyone — meaning Opera, Microsoft, and Mozilla — should switch to WebKit. In WebKitopia, the thinking goes, we’d have One True Browser Core that magically […] [1 Feb 2013]
@supports API lands in Firefox Nightlies
This is old(ish) news to those of you who have been paying attention: support for the @supports API — CSS.supports() — landed in Firefox late last month. So far, a complete implementation is only available in Firefox Nightly builds. It should show up in a Firefox release sometime soon. Opera included full support for @supports […] [17 Jan 2013]
Striped border bug on transformed elements in ≤ Opera 12.02
Opera’s border rendering on elements with a rotate transform applied. Opera 12.02 (and older versions with support for transforms) has a rendering bug in which borders of elements that have a rotation transformation applied will appear striped when placed on a colored background. The image above shows this bug in action. The code below shows […] [12 Oct 2012]
Toying with CSS Filter Effects
A screen shot of what a photo looks like with a hue-rotation filter applied. I spent this weekend getting my feet wet with CSS Filter Effects, in particular, the filter functions. They’re easy and fun to use, allow us to do really neat effects in the browser without requiring <canvas>. The current version of the […] [2 Oct 2012]