With viewport units, you can describe width, height, font-size and other CSS styles as percentages of the viewport width and height. There are, however, a few nasty gotchas when it comes to using them in iOS Safari and IE9 and 10. They also don’t always play nice in CSS3 calc()
statements and don’t work at all in IE Visual Filters. Using them in iframes
can also be problematic. This post talks about how to work around these issues easily using a JavaScript buggyfill (not polyfill). I have used viewport units in production sites today, and now you can too, on any phone or device used in the wild today.
Entries Tagged as 'IE Visual Filters'
Fixing Cross-Browser Issues With CSS3 Viewport Units in IE9+ and Safari for iOS
Tags: CSS · CSS3 · IE Visual Filters · math · viewport units
How to Simulate CSS3 box-shadow
in IE6-8 Without JavaScript.
Using CSS3, developers can create simple, glowing and blurred box-shadows in all modern web browsers. But what about IE6-8? This article will discuss how you can simulate them using a variety of Visual Filters to simulate them. This article will cover a few CSS3 box-shadow effects, the equivalent Visual Filter recipes for IE 6-8, and the differences between them.
Tags: box-shadow · CSS3 · IE Visual Filters
Full CSS3 Text-Shadows — Even In IE
While researching the possibilities of using text-shadows in IE, I noticed that there wasn’t any silver bullet that produced multiple CSS3-like text-shadows in IE. However, combining my cssSandpaper script with a refactored version of a text-shadowing script by Kazumasa Hasegawa, we can now have IE text-shadow goodness.
Tags: ClearType · CSS · CSS3 · IE Visual Filters · JavaScript · Polyfills · text-shadow
CSS Blurred Text-Shadow in IE — Part I
Last week, I discussed several strategies web developers can use to simulate CSS text-shadow in IE. In that article, I mentioned that there was no way that I knew of to simulate text-shadow with a blur-radius in IE without JavaScript. Since then, I have discovered a way to simulate the CSS text-shadow
effect in IE9 that does not use JavaScript and does not add extra elements to the DOM.
Tags: CSS3 · IE Visual Filters · text-shadow · Uncategorized
CSS3 Text-Shadow – Can It Be Done in IE Without JavaScript?
CSS3 text-shadow
rocks, but it doesn’t work in any version of Internet Explorer, including IE9. While it is impossible to replicate all text-shadow
effects in The Browser That Likes To Be Difficult, there are some ways to emulate this effect without JavaScript using Visual Filters, even when ClearType is enabled. This article can show you how and contains lots of examples.
Tags: ClearType · CSS3 · IE Visual Filters · text-shadow · Uncategorized
How to Make ClearType, @font-face Fonts and CSS Visual Filters Play Nicely Together
Ever had a problem with using IE’s Alpha Visual Filter and getting blocky text? A solution has been found, and it doesn’t use JavaScript. I expect to hear a sigh of relief from many developers.
Tags: @font-face · ClearType · CSS · CSS3 · Fonts · IE Visual Filters
cssSandpaper Now Supports transform: translate()
and rgba()
Gradients
In the first in a planned series of posts, I update cssSandpaper with new features. This week I add IE support for translate()
support to CSS transforms and alpha channel support to linear gradients.
Tags: Color · CSS · CSS3 · IE Visual Filters · JavaScript · Polyfills · rgb/rgba · transform
Cross-Browser Animated CSS Transforms — Even in IE.
This is a follow-up article to my original CSS3 Transform article where I extend cssSandpaper to support scripting. Now you can animate Css3 Transforms (as well as gradients, opacities and box-shadows) in all browsers, including IE, without a lot of issues. Includes lots of neat examples.
Tags: CSS · CSS3 · gradients · IE Visual Filters · JavaScript · Polyfills · transform
Cross Browser CSS Transforms – even in IE
The CSS transform property allows developers to rotate, scale, and skew blocks of HTML via CSS. There are variants that work natively on all major browsers … except for IE. I created a new library, cssSandpaper, that implements CSS3 transforms (as well as gradients and box-shadows) in IE. It also allows developers to use one transform declaration, instead of three vendor-specific ones for Opera, Firefox and WebKit browsers.
Tags: box-shadow · CSS · CSS3 · gradients · IE Visual Filters · JavaScript · Polyfills · transform