Is there a way to style a range control such that it degrades gracefully in IE8?
I've seen a way to style it for other HTML5 compatible browsers here:
Is there a way to style HTML5's range control?
But with the help on that page, the control does not show at all in IE8. Instead it only shows a textbox with the range value.
First of all. Most browsers, which support this type of control also do support styling it. Only Opera below version 12 doesn't support styling it. Other browsers, like IE8 do not even support this control, so you will need a polyfill for it.
If you want you can try webshims. Here is an example, which uses different pseudo-element selectors to style native and polyfilled input[type="range"].
But to be honest, it is quite heavy to a) do fancy styling consitent x-browser and b) not all styles do work well with iOS.
Related
What are my options here? I'd like to have some text change from color A to color B constantly, not on hover.
I'm thinking CSS3 animations, or maybe Javascript. But JS seems a bit bulky for this.
I know I can use a .gif for this, but I'd prefer to actually have it be 'text' in case it is needed to be changed or dynamically generated, say, for a username.
Is CSS keyframes the best way to go? I'm a bit reluctant for the CSS animation method because of browser support. Does anyone have any better ideas? Thanks!
I'd personally recommend using CSS3 animations and gracefully degrading to non-animated text for unsupported browsers.
According to Can I Use, CSS 3 animations are supported by all major modern browsers: IE 10, Firefox 5+, Chrome, and Safari 4+ (for desktop browsers anyways). Mobile support looks pretty good as well. Of course, some of the browsers require prefixes (i.e. -webkit-).
If you require IE <= 9 support, you can always write the JavaScript and put it in a conditional comment. It's a bit redundant, but then again what isn't redundant when it comes to cross-browser compatible web design with leading technologies?
Also see the MDN article on CSS animations.
I am using the date input type in HTML 5 and wanted to customize the look, i found a bunch of code but they all seem to be Webkit pseudo-elements, meaning they'll only work with Webkit browser such as Chrome.
::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator
They are the pseudo-elements elements that i found (Haven't really check if it's a complete list).
Now my question is, how do i make the custom styling for the date input cross platform? Do browser like IE, Firefox and Opera have there own pseudo-elements to achieve this sort of customization?
Thanks for the help.
I'd suggest jQuery UI's datepicker. It requires JavaScript/jQuery but quite simple to install and works great on all platforms even on mobile devices. Check out here: http://jqueryui.com/datepicker/
I have put together this simple code for showing/hiding some content on click using CSS only. It works as I want it to in FF but wont work in Chrome or Safari (untested as yet in IE)
http://jsfiddle.net/fW3yW/
Can someone please tell me why it wont work in these browsers and suggest an alternative (using CSS only if possible)?
Here is the site where the code is being used - http://www.themontessoripeople.co.uk/montesori/?page_id=20#policies-list
Added tabindex, works in Chrome: http://jsfiddle.net/fW3yW/1/
From here: css focus not working in safari and chrome
jQuery method: http://jsfiddle.net/fW3yW/12/
You're abusing CSS. The :focus psuedo-class is meant for styling form elements that have focus, rather than for <a> links, where browsers might implement :focus differently, and then there's also the similar :active psuedo-class.
I suggest you do not hide anything by default with CSS, but use jQuery to hide the elements on-load, then use jQuery to create show/hide animations (easily done with a single line of code) when a link is clicked. It's a lot more elegant and works on more browsers.
You're using a CSS3 selector, with an XHTML doctype. I don't know that all browsers will handle CSS3 with an XHTML doctype tag - though the two specs aren't necessarily tied together.
Have you tried changing the doctype to indicate HTML5? (Then, of course, that brings up all kinds of HTML5shim questions...)
Use jQuery instead...way more reliable and elegant.
http://www.w3schools.com/jquery/jquery_hide_show.asp
Our website looks great in all browsers except IE 6-8. We're not even using many CSS3 features. These are just plain old IE rendering bugs (like margins and padding). Before trying to apply a bunch of IE specific fixes, I was wondering if anyone knows of a javascript library that I could apply to fix a bunch of these typical bugs?
Update: Like I mentioned, we're not necessarily using any "modern" CSS3 features nor HTML5, so these are just typical IE 8 bugs where IE renders things differently than all the other browsers.
Go for excellent normalize.css reset that takes care of most of it (also used by HTML5 Boilerplate)
Normalize.css is a customisable CSS file that makes browsers render
all elements more consistently and in line with modern standards. We
researched the differences between default browser styles in order to
precisely target only the styles that need normalizing.
As for getting support of CSS3 for browsers that don't support it, check out CSS3Pie
You don't need JavaScript; just use a CSS reset file: http://yuilibrary.com/yui/docs/cssreset/
That will work across most browsers to not only fix IE issues, but also make your site render more uniformly over different browsers.
You might wanna take a look at this one: https://code.google.com/p/ie7-js/
or this: https://code.google.com/p/html5shiv/
IIRC the situation is that IE simply doesn't support rounded corners, but some other browsers need browser-specific extensions... either FF or web-kit, I don't recall.
I'm happy to use it in some cases and let IE fall-back to square corners, but does using browser-extension CSS break validation... I quite like having my site validate AND work on IE6.
border-radius will validate against CSS3 and will work in IE9 and Opera 9.5+.
To support rounded corners in Gecko (Firefox) and WebKit (Safari, Chrome) you would need the vendor extensions -moz-border-radius and -webkit-border-radius for now. Eventually (sometime around when CSS3 Background and Borders reaches Recommendation stage), those browsers will also support the simple border-radius property, but for now they don't as there are still some issues to be hammered out over the exact syntax for specific elliptical and multiple corners.
The -vendor-x extension properties will never validate, which is a shame, but they are defined by CSS itself to be harmless so you can safely ignore those errors.
I think that most browsers no longer need specific extensions: simply use border-radius, and make sure you validate your CSS as CSS3 (rather than CSS 2.1, which the default for the W3C validator).
Invalid HTML/CSS is not why pages break in browsers like IE6, it's because they don't follow the standard.
IMO, validation is meaningless if you're using a CSS property for progressive enhancement. If the rest of the page is valid then adding border radius (including the vendor-specific properties) doesn't break in other browsers, they just ignore the property.