11
Jul
The big vendor prefix discussion comes and goes in waves, but one conclusion that always pops up is that these prefixes should have a shorter lifespan. Of course browser makers may shift the responsability to specification writers, arguing that specs take too long to reach Candidate Recommendation (CR) status. Well, it seems the unprefix express is finally picking up steam.
A few weeks ago we heard about unprefixed transitions, transforms, animations, gradients, IndexedDB (and more) in the next Internet Explorer, and this week the Firefox team anounced exactly the same.
This is all great news. Even better, as Lea Verou noticed:
Keep in mind that this means you don’t have to use the -ms- prefix at all for transitions, animations and gradients, since no stable build of IE was ever released that requires it.
prefixes
browsers
Firefox
IE
spec
ads by Yoggrt
18
Dec
In CSS, there have been filters for a long time. Microsoft first introduced them for Internet Explorer 4, producing a range of visual effects and transitions. Also called DirectX filters, we still occasionally use them today, for things like fallbacks for CSS gradients. They are proprietary though, and were never picked up by other browser vendors.
As a result, the Internet Explorer team decided to add the -ms- prefix in 2009. But soon after these filters were deprecated, and in IE10 they won’t even be supported no more. So you really never need to bother with the -ms-filter syntax, just use filter in those rare cases.
In the meantime, the filter property has been reborn however, this time for SVG filter effects applied in CSS. Partially supported in Firefox since version 3.5, they’re currently being formally specified, and also being implemented in Internet Explorer 10 and WebKit. These CSS filter effects will allow some very exciting Photoshop-like filters, like grayscale, sepia, blur, saturate, brightness, and much more. Coming soon!
filters
spec
IE
SVG
CSS
06
Nov
You’ve probably come across the use of CSS filters as fallback techniques for RGBa colors or CSS gradients for example. They have their limitations and implications, but they do come in handy sometimes. They look something like this:
.awesomesauce {
background: rgba(0,0,0,.6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
}
Maybe you’ve noticed these weird colors that have 8 instead of the usual 6 hexadecimal digits. Well, these are aRGB colors, used in Internet Explorer filters but also in Android development among others.
The syntax is pretty easy: first a pair of digits for the alpha channel and then 3 pairs for the RGB channels, just like regular hex colors. But instead of specifying alpha as a percentage or a floating point like for RGBa colors, it is defined in a range from 00 to FF. To calculate the hex value from a decimal number in JavaScript:
hexAlpha = Math.floor(decimalAlpha * 255).toString(16);
// so:
// rgba(255,255,255,0) = #00ffffff
// rgba(0,0,0,.5) = #7f000000
// rgba(255,255,0,1) = #ffffff00 = #ffff00 = #ff0
To make it even easier, there are several RGBa to aRGB convertors out there.
CSS
IE
RGBa
aRGB
colors
filters
hex
29
Jul
Having inline style blocks in an AJAX response is pretty problematic for Internet Explorer. If the style element is right at the start of the response, it’s ignored entirely. The solution is to put any other element before the style tag – check the demo.
But even then it’s not bug free. Using the background fallbacks technique (serving a solid background color to IE and gradients to other browsers) I ended up with no background at all. I had to explicitly specify the solid color in the gradient rules as well – see demo.
Internet Explorer… sigh
css
tricks
ie
bug
ajax
14
Jul
This is a simple old trick, but still an issue I see cropping up all too often: people putting non-breaking spaces ( ) in empty cells in data tables, so the background and borders are rendered. Don’t. Just put this in your reset.css:
table { empty-cells: show; }
Works fine in all browsers. Internet Explorer 7 and lower even have show as the default – unalterable – value.
css
tricks
ie
tables
02
Jul
One of the new features in Internet Explorer Platform Preview 2 that didn’t get a lot of attention is support for positioned floats. It’s the short name for a specification called CSS Floats and Positioning Level 3, proposed in May by Microsoft and Adobe. You can tell why these two companies submitted the idea, as it’s the translation of a common feature of word processing and desktop publishing apps: text wrap.
Instead of limiting elements to floating either to the left or right relative to their position in the document flow, positioned floats can be positioned at a specified distance from the top, bottom, left, or right sides of a containing block, while remaining part of the document flow.
How does it work? A new value is proposed for the float property: positioned – which becomes -ms-positioned in Microsoft’s first implementation. If you apply this in conjunction with position: absolute, you can position an element while it still affects the flow of the page. So inline content will not be overlapped by an absolutely positioned float, it will wrap around it.
It’s a pretty interesting answer to a common problem. It remains to be seen if the W3C deems it a good and complete solution however. There’s more details about the implementation of positioned floats on the IE10 Platform Preview docs.
ie
microsoft
adobe
proposal
css
14
Jun
Talking about the CSS Backgrounds and Borders Module Level 3, have you ever heard of the space and round values for background-repeat?
The spec says this about space:
The image is repeated as often as will fit within the background positioning area without being clipped and then the images are spaced out to fill the area.
And round will stretch your image:
The image is repeated as often as will fit within the background positioning area. If it doesn’t fit a whole number of times, it is rescaled so that it does.
Support is limited, but both Opera 11+ and IE 9+ are first of class. Demo - Bugzilla bug for Firefox
background
images
IE
Opera
