I want to make my own custom CSS elements that will be handled by a js file of mine. Is this possible?
Here would be an example:
div {
rounded-corners:15px 15px
}
And then use Javascript to apply the styles for each browser for rounding corners.
Is there a way to do something like this?
EDIT
The point isn't to add a common support for browsers. I want to implement my own CSS things.
The answer is "no". While it is possible to easily get style values from stylesheets in Internet Explorer by accessing the currentStyle property, like so:
alert(myDiv.currentStyle['rounded-corners']);
//-> "15px 15px"
...other browsers don't support the currentStyle property, opting instead to support the W3C standard window.getComputedStyle(). getComputedStyle() doesn't include "expando" style properties in the outcome, which means your only option would be to iterate over the rules in each stylesheet instead, which could be an expensive procedure depending on how many stylesheets and rules you have. Obviously, you also lose out on the browser's cascading/computing.
IE9 and the latest versions of Firefox and Chrome all handle border-radius anyway.
And you can use CSS3 Pie to add support to older version of IE. No need to write your own script.
EDIT: I suppose you could write your own version of CSS3 Pie, but why would you want to?
You may want to look into SASS/SCSS or LESS, which both offer "mixins". These act like functions in CSS, and should let you do what you want. LESS at least can be made to work client-side through Javascript; I suspect SCSS can too.
CSS already has a property for rounded corners, called border-radius.
This is supported by virtually all browsers in current use. The only exception of any significance is IE8 and earlier.
The good news in this case is that IE8 can indeed be programmed to work the way you're asking. Other browsers cannot, but IE can, and this is lucky, as it's the one browser that needs it more often than most.
So the direct answer to your question is "sometimes". Most browsers drop the styles they don't support, but IE keeps them. It obviously don't do anything with them, but you can access them via the DOM, which means that you can do what you're asking.... but only really in IE.
In the case of rounded corners, there is already an excellent Javascript-based hack for it called CSS3Pie. This is open source, so you can examine their source code to learn how it's done.
The CSS3Pie code is quite complex though, so if you want a simpler example to work from, take a look at this older script which does the same thing a lot more simplistically. Easier to read, but not as functional. For real life use, use CSS3Pie, but for learning, this one is a better starting point.
For working with IE, I would suggest following the examples in these scripts to achieve what you're asking. For other browsers, you will have a much harder time.
Related
Before I launch into the specifics of the issues I am facing, I just need to ask: Is it a mistake to use IE8 as the reference for building a website, particularly one that uses JavaScript animation? I ask because I have written a fairly simple animation page, mostly from scratch, even with my weak grasp of HTML and JavaScript languages, using IE8 to monitor the progress. I have tweaked the code so that it works just fine in IE8 (compatibility mode turned off), but when I tried it in Safari and Chrome, it does some weird hiccuping in the animation.
I find a lot of questions with the opposite problem: that it works well in everything but IE. So I am wondering, should I be using a different browser for my reference? Or is there a better approach to make it compatible with all browsers? It's so frustrating (as I am sure most of you will agree) to have to deal with the different interpretations of the different browsers.
Thanks for any help!
p.s. I have not coded yet for Mozilla.
Using ie8 as a reference from a performance point of view is not a bad idea, since it has weak js and rendering performance. Using ie7 is even better.
Cross browser compatibility wise, it doesn't matter what you use - unless you use a crossbrowser library like jQuery as your base for the animations you will have to write specific code for the various js and render engines.
Even if you use a library like jQuery, you will still run into rendering issues since the various html/render engines are different across browsers. chrome/safari uses webkit, firefox uses gecko etc.
The only way to do it right is to start your project by defining what browsers you wish to support and then test what you do in all of them while you are developing your code.
If you're doing animations, I encourage you to take advantage of css transitions instead of controlling the elements via javascript - you'll have an opportunity to take advantage of graphics hardware as well as more efficient drawing of pixels in general.
If you need to still perform animations in browsers that don't support those css transitions ( some in ie9, none in ie6-8) then you can use a tool like modernizr to detect what's available and control those elements in the event those features aren't available.
Typically, the animations are extra - so I've had good success in ditching the animations for IE users - if you're making slow, javascript driven animations just to work for IE users, you're punishing users that are using better browsers.
Just my $0.02 of course
I'm wondering if folks can tell me how trouble free CSS3PIE is for IE6 - IE8 (beyond the known issues). It seems like an excellent addition to allow one to use CSS3 features -- rounded corners, gradients, shadows, etc -- I just have limited time to invest into investigating stability / errors.
Thanks
P.S. Does it turn off automatically in browsers that support CSS3?
It has worked perfectly for me and it only affects IE so you dont have to worry about the other browsers.
Don't worry it's transparent.
The only "real" problem I've been having was with opacity transitions in ie8 :
In order to make a div fade out, you need to apply this css definition to every child element :
filter: inherit
Problem is it doesn't seem to work on the shape elements css3pie generates with css only. I had to modify the minified .htc file as folows :
look for the second occurance of "shape" in the script. It's in a function called 'Aa'.
After this statement:
g=e[a]=f.p.Za("shape");
you can add:
g.style.filter="inherit";
This clearly is a hack but it works great!
It is just for IE8. IE7 deals with transparency differently (http://www.jacklmoore.com/notes/ie-opacity-inheritance)
A lot of the stuff that I seem to end up doing to support older less-than-compliant browsers seems to be (1) repetitive and (2) easy to forget. Two things that indicate to me they should probably be dealt with by a computer instead of my brain.
For instance, anywhere I use...
.element-selector {
display:inline-block;
}
...in order to support IE7 I actually need to apply the additional rules...
.element-selector {
display: inline-block;
/* IE7 */
zoom: 1;
display: inline;
/* End IE7 */
}
...in order for things to render properly in IE7.
I'm not sure exactly what I'm asking for here. But it seems like there should be something that I can setup to "do this for me". Maybe some script that statically analyzes my CSS docs and inserts these things? Some crazy jQuery plugin that inserts them into the DOM? Some CSS generating pseudo-language that allows for the automated creation of CSS documents?
Automating & Simplifying Crossbrowser
Support
I'm assuming by "Crossbrowser", you're mostly talking about Internet Explorer. It is the biggest troublemaker, and some of the older versions are still in annoyingly widespread usage. The usage of older versions of other browsers is negligible enough that you can forget about them.
It looks like you've (wisely) already forgotten about older versions of non-IE browsers; to make (your example) display: inline-block work in Firefox 2, you need display: -moz-inline-stack.
Some crazy jQuery plugin that inserts
them into the DOM?
Not jQuery :) But this fixes many issues: http://code.google.com/p/ie7-js/
IE9.js - Upgrade MSIE5.5-8 to be
compatible with modern browsers.
I do have to point out that anything JavaScript based obviously won't work when JavaScript is turned off.
Maybe some script that statically
analyzes my CSS docs and inserts these
things?
The closest thing I can think of to that is this: http://www.onderhond.com/tools/ie6fixer/
Welcome to the IE6 CSS Fixer: starter
kit page. A tool specifically designed
to ease the pain of the ie6 css
debugger. .. It is extremely
important to note that this tool is
not a miracle solution. .. In some
circumstances it can even introduce
new errors, so keep that in mind when
you add one of the potentially
harmfull fixes. Also know that it does
not output clean, lean and optimized
css code. .. This tool was concieved
to decrease the monkey work when
starting an ie6 css fix file. It
applies a series of basic fixes that
are known to conquer many problems and
cause as little harm as possible.
It only specifically tries to fix IE6 related issues, which is thankfully becoming less and less important.
Something like Sass or Less can help you with that. You can define mixins and use those.
.inline-mix {
display: inline-block;
/* IE7 */
zoom: 1;
display: inline;
/* End IE7 */
}
.element-selector {
.inline-mix;
}
This isn't an automated solution but it can help a little to dry up your css.
I worked on a compliance project team for a large bank, redoing over 1,000 websites for their credit card business. Requirements were ridiculously strict and specified backwards compatibility for users below IE6, screenreader support, and lack of javascript/images. The single tool that made it quick and possible was 960.gs
The reset took us back to baseline, and eliminated the need for quite a few IE specific hacks (they were already done by the code) The grids eliminated box-model deficiencies of IE, and helped ensure that layout wasn't eating up time in the production process. The time saved allowed us to exceed production expectations and more thoroughly test, which was a win all around.
In my time there, I wasn't allowed to use JQuery, used EXTREMELY sparce Javascript, and 3 total IE hacks across hundreds of pages. The only way that was possible was with grids. It's not a super high-tech, sexy answer. But, I swear by the idea of a battle tested framework to speed up production.
To create rounded corners on my container elements I use this CSS:
border-radius:12px; -moz-border-radius: 12px; -webkit-border-radius: 12px;
However, IE does not appear to recognize and interpret the border-radius property (at least version 7-8, apparently its slated for version 9).
Is there a workaround for this that's doable entirely in CSS (no script, no extra markup)?
For JavaScript/jQuery solutions: I'd use a solution based on these if I could include a single script that would read my CSS, interpret the border-radius properties (including border-top-left-radius, border-top-right-radius), and apply the corners accordingly. Does this exist?
As far as I know for IE<9 there is no way to do this in pure CSS.
It has been documented that IE9 has border radius support.
There are Javascript workarounds available, but as you said you don't want to implement them, you're a bit stuck.
Unless you want to use images, this works well if you have static size elements, but doesn't work if they change size.
Other than that, I am not aware of any pure CSS solution without a lot of hacky markup.
Update:
I already linked to a resource that can do this for you, the CurvyCorners jQuery will detect the use of -webkit-border-radius and moz-border-radius on DOM elements and duplicate the effect in IE using a series of small DIVs with no images. You can also tell it to apply the effect to specific elements.
Update #2:
After Spudley's suggestion of checking out CSS3Pie, I would very much suggest this as the way to go as it uses the CSS property behaviour which only applies to IE, so it won't screw with the rest of the browsers, also this means no hacky markup added to your page (Curvy Corners adds many small divs) and no use of images.
Hope it helps :)
You ask for a way to do it without scripting and without any extra markup. This simply isn't possible. The feature is missing from IE7/8, and the only way to get IE to do it is by simulating the feature either with scripting or markup.
The best options are ones which only affect IE and are invisible to other browsers. This means that CSS3Pie stands head and shoulders above all the other options, because the technique it uses is only supported by IE. It also allows you to specify your border radius in CSS in the same way as for other browsers, making it more consistent.
Personally, I'd go for this solution every time. It's by far the cleanest solution you'll find for IE. Forget about any jQuery or pure javascript solutions; they almost all have issues of one sort or another, and as for markup options that involve corner graphics; just don't even think about it!
The real benefit that CSS3Pie has over other common solutions is that it uses a vector-graphics based solution, rather than pasting loads of divs into your document as CurvyCorners and others do. This means that the rounded corners CSS3Pie generates are smoothly drawn and works properly with background graphics on both the element itself and those behind it. Most other solutions have serious issues in these areas.
I don't know why you'd object to using scripting - especially HTC-based ones like this which don't get in the way of the other scripts. The absolute worst case is that a user has scripting turned off. And in that case, all they get is square corners; it's not the end of the world.
you can use .htc for border radius. link1 for htc files link2 for htc files
I suggest to have a look at this site. CSS3 Please
The scripting / jQuery solution you are talking about does exist, take a look at jQuery Curvy Corners.
Is there any JavaScript (library) or any other solution, through which we can fix most of IE6 issues like PNG fix and also make IE6 to support CSS3 properties?
No. CSS3 support in IE6 is not going to happen. There is library available that will make IE6 more-or-less compatible with IE7:
http://code.google.com/p/ie7-js/
Short answer: No.
A little bit longer answer: While you can cobble together pieces of code here and there that help you get most of what you want in IE6, the problem is that none of these technologies out there are perfect (with most PNG fixes - try using transparent PNGs on a background image and change the background image by changing a class). There may be solutions for rounded corners or shadows but they will likely be glitchy too.
Many JavaScript frameworks offer nearly complete JavaScript feature-support for IE6, but the case is not the same for CSS. Many things in advanced CSS (2 and 3) will never be possible in IE6, but have to be achieved in different ways. There is no content property, :hover only works on anchor tags, attribute-based pseudo selectors don't work.
Even technologies like GWT that compile seamlessly to JavaScript for all browsers offer conditional CSS so that you can code your own hacks or graceful degradation.
I'm assuming jQuery goes a long way toward resolving IE6 issues because the library tries for cross-browser compatibility and deals with CSS. At least there might not be a better option.
You might check the Test Swarm for jQuery to see where the IE6 tests are at.
Late in the game but http://css3pie.com/ should help people looking for an alternative
PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features
jQuery and other popular frameworks handle many cross browser compatibility options but won't address PNG transparency, most unsupported CSS3 etc.
If you want to take it a step up though, Google Chrome Frame is an option, however this has to be installed on client computers.