I need to get the effect of -webkit-mask-image in Internet Explorer 10.
Unfortunately, the only way I found with google is putting all the contents into an SVG, which is not applicable.
Experimental masking features in Webkit browsers are just that, experimental. Until they gain more wide-spread adoption, or are officially adopted by the W3C, we shouldn't expect to see other browsers implement the same feature.
Consider an alternative solution. For instance, Martin Beeby was able to accomplish a "masking" effect simply by using 2D Transformations, meaning his solution is supported as far back as IE9.
Related
I've been enjoying using these effects and I don't mind them gracefully degrading in older browsers, but Internet Explorer 11 and Edge 12 still don't support them.
This isn't the first time Microsoft avoids adopting specifications that are widely in use everywhere else.
I understand Edge was a big project and the IE browser was also re-worked from the ground up in IE8/9, but it sometimes almost seems like IE/Edge deliberately makes things difficult for designers and developers in the lack of continuity between it and what other browsers like Firefox, Chrome and Safari are adopting.
Are there reasons for this that I'm failing to recognize?
CSS Filter effects are supported as per https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/css/filter-effects/
I have seen them on my own website https://trajano.net/ except for one scenario that is Do CSS Filter Effects work when position:absolute in Edge?
I am trying to execute a card flip animation that holds throughout IE10+, but I'm hitting a rut given that the IE has no support for transform-style: preserve-3d;. I've seen multiple "fixes" for this, but none will work with my code. I am hoping somebody from this awesome community can step in and help me figure out this hot mess!! Any and all help would be very much appreciated! Thank you so much in advance!
http://jsfiddle.net/rebeccatcook/E8mLp/
Internet Explorer supports transform-style since version 11 so you should be fine there. IE10 supports 3D transforms, but as you point out, does not support the transform-style property which specifies how nested elements are rendered in 3D space. This is why you are not seeing your "Back text".
I'm not sure what "fixes" your referring to but the common practice is to simply leverage "fall-back animations" that are supported by the specific browser version. For IE10 I would use modernizr to sniff browser features and append custom CSS classes to implement a a simple fade in/out effect.
If you absolutely have to have this effect without JavaScript, you could use IE Matrix filters but it can be a time suck getting it to act right. Here's a reference point: http://www.useragentman.com/IETransformsTranslator/
Good luck!
The thing I hate most in CSS3 is that there is always two properties you should put to do one effect. I think this is not professional, and increase the CSS size. For example, why don't they unite -webkit-border-radius and -moz-border-radius in border-radius
Imagine if we have 10 browsers, will we write 10 lines to do a rounded corner effect? Anyone can explain?
It's because they're vendor-specific. -webkit- and -moz- -prefixed properties are not standard properties. That "namespacing" allows vendors to test new cool features, and if they're great, they can be incorporated into the standards. This is what is happening with CSS3: Mozilla and the Webkit team tried cool things, and now they're going to become standard. It's just not done yet. Eventually it'll become a consistent border-radius property.
It's a clear way to indicate that something is not expected to work on all browsers. For instance, -webkit-transition-property only works on Webkit-based browsers.
Anyways, -webkit-border-radius and -moz-border-radius don't exactly work the same. It's because each vendor, even though they're doing similar things, are allowed to implement features the way they want. The standard will establish a standard way, but everyone is free to do whatever they want within their own namespace.
-webkit-border-radius and -moz-border-radius were created before the CSS3 borders standard was a complete (it is still not an approved standard - it is currently a Candidate Recommendation).
The standard calls for a border-radius only, as you can see from the specification.
They are specific to mozilla and webkit - once the standard is approved this should change to be border-radius on all supporting browsers.
With lots of talk and bickering among developers about how IE breaks standards, is it worth supporting mozilla and webkit CSS?
Examples
-moz-border-radius
-webkit-border-radius
Of course there are many more, but I just want to know everyone's thoughts.
Thanks
For IE, we were (are?) using proprietary features in order to eliminate rendering bugs. At least, in the case of FF and WebKit, we're using them to improve the design. It's progressive enhancement in this case. No one suffers if they have no border-radius feature, but we as developers get more satisfaction for using some CSS3 features. Our designs are more pleasing and W3C gets the feedback it needs in order to improve and then approve the CSS3 draft.
Rounded corners are proposed in the W3C CSS3 working draft. The proprietary extensions in Gecko and WebKit are already likely to conform to the working draft.
Given that rounded corners are purely aesthetic, there's no disadvantage to users with browsers who do not support rounded corners.
When the standard becomes final, it's a simple matter of replacing these proprietary rules with the standardised ones.
If you define -moz-border-radius and -webkit-border-radius, make sure and define -khtml-border-radius (Konqueror), -opera-border-radius, and plain old border-radius as well (for future-proofing purposes).
We tend to use the proprietary methods followed by the CSS3 spec version for when the method becomes more widley supported.
http://www.w3.org/TR/css3-background/#the-border-radius
If necessary (which isn't often) we use JQuery + IE conditional tags to render the same for IE.
http://malsup.com/jquery/corner/
http://www.quirksmode.org/css/condcom.html
It really all depends on your target audience, we wouldn't generally use unsupported CSS on a public facing site as 89% of our users are still using IE 6/7 so it would be useless to most of them.
We currently use it on a few admin systems and some internal systems; mostly to give the design team exposure to the new techniques.
Consider your target audience, browser specs based on analytic's and how necessary it really is first.
I'd support both, IE still has a big chunk of the user space, with Firefox and others (opera, safari etc..) occupying a smaller percentage of the browser market.
using mozilla only stuff might be ok if you can control what your clients are using, by recommending it in some way (if you're writing a web app. with a fixed user base) and even then someone will still insist on using IE.
I know its a pain in the backside supporting both, but I don't think web developers have much choice in the matter :(
In the case of border-radius, I'd say use the Mozilla/Webkit syntax if you don't mind IE/Opera users having squared corners.
If you need everyone to see the same thing, it's best to stick with the old techniques for now. Similarly, any non-universal CSS (say, using #font-face to download a custom symbol font) which is going to break the site for some people should stay out.
There's no harm in implementing CSS3 features so long as they degrade gracefully. So long as rounded corners, or what have you, aren't critical to your layout there's no harm having them there for the people who are running bleeding edge web browsers.
I know from personal experience that having those properties(specifically the corner radius ones) are very much a time-saver. Now of course it would be nice if css would just implement it into itself but right now I think that those properties are very helpful. I see no reason why we shouldn't support them. Mozilla's and Safari/Chrome's engines are just trying to make life a little easier.
I don't think this is a good practice. However you'd like that the site you're working on appears the same on every browser. That's why that's not a solution. It's not professional to have different layouts on different browser.
But if you don't care about that, or your application is based on only that browser - so it's completely fine!
I just noticed that Stack Overflow employs Firefox only CSS to round the corners of the user badges on the front page. It's an interesting idea but what would be the pitfalls and advantages of using Firefox only CSS (aside from the blatantly obvious ones)?
-moz-border-radius:6px;
-webkit-border-radius:6px;
Above: The CSS used to round corners on the Stack Overflow front page.
The main problem would be, as I see it, that your css wouldn't validate. Other than that I see no reason why not to use this type of platform specific features as they don't cause any harm to users whose browsers don't support the features.
The advantages are that it's much easier than using corner images or other tricks. The obvious disadvantage is that your page doesn't render as intended on IE, which is still used by more than half the world's web users.
Overall it's situational; I imagine SO gets a higher than usual proportion of people using Firefox, so the IE issue is not as relevant. And rounded corners are a minor visual improvement, so if some people see it and some don't, it's not that big a deal.
I agree with BeefTurkey.
I might even go further and call it a case of Progressive Enhancement with CSS. To borrow liberally from Understanding Progressive Enhancement, I'd consider rounded corners to be part of the colorful candy coating around the chocolate-covered peanut.
And eventually CSS3 will be ratified and border-radius will be standardized. -moz, -webkit and -ms prefixed styles can be removed and replaced with their standard equivalents. Your CSS will validate and people using browsers that don't support CSS3 will still have a completely acceptable experience with people using browsers that do support CSS3 will get an enhanced experience.
Alternatively you could continue to use the proprietary CSS in addition to any standards to give an enhanced experience to an even larger audience. It would really depend on how much effort maintaining all that CSS requires and how important you feel the enhanced experience is to your audience.
It works in Firefox and the Webkit-based browsers (notably Safari and Chrome). There are no alternatives for IE or Opera.
The main reason to use it is when you want to give rounded corners to elements that display on top of patterned or unpredictable backgrounds, which is not possible otherwise. Normal CSS and images can take care of other situations.
It's also ridiculously easy to implement and surely works for more than half the people on this site.
Pitfalls are of course that it's not supported in other browsers and its not in the W3C specification.
The current implementation is bad (both in firefox and webkit) since they do not share the syntax.