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/
Related
I am using this plugin here:
http://tympanus.net/Tutorials/3DRestaurantMenu/
It works pretty well, however, it lacks support for IE11. In IE9 and lower, it appears as a 2D menu, disabling CSS3. However, IE11 apparently has partial CSS3 support, but incomplete support and hence it appears weird. The plugin uses Modernizr to recognize this, I believe. I have tried using the latest Modernizr version without success. Is there a way to add a header tag in there to detect any IE browser and disable CSS3 elements completely?
Thank you in advance!
I was able to target IE11 using media queries:
https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/
So it appears, IE11 is still missing complete CSS3 support, unless I'm missing something?
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.
Can anyone tell me the best way to ensure asp.net sites look the same when view in IE, Chrome or Firefox?
I've just finished one which in testing seems fine in IE but not the other 2.
I have not used CSS on this site as its not that big, I just formatted the masterpage as I wanted it.
Could that be the problem?
I usually code for Firefox first. That makes things match almost 100% in Chrome, Safari and IE9 usually. Then I go through and test in IE 8 and 7. Minor adjustments are typically made within the same CSS file. For example, IE7 usually needs to have dimensions of a container explicitly set, where most modern day browsers don't require it and render things properly.
In those rare cases that you do need to style something specifically for one or more versions of IE, use conditional comments. Here are some good links on conditional comments and how to target specific browsers and versions:
http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx
http://www.quirksmode.org/css/condcom.html
Unfortunately you will need to use CSS to get this to look similar in all browsers. I say similar as it is unlikely you will ever get it looking exactly the same.
Basically you will need to use the conditional CSS tags http://www.javascriptkit.com/dhtmltutors/csshacks.shtml
I would recommend spliting out the style to the a CSS and getting that working in Chrome and Firefox. Then use the tutorial linked and add in IE hacks to make it look better.
There isn't an easy way of making a site look the same in all the browsers. As caveman_dick said, maybe it's even impossible. You have to use CSS and sometimes javascript...
But to help you, you can use some programs that simulate different browsers engines, so that you could see how your site behaves. Just google browser simulator. :)
Where can I find a complete "browser specific css attributes" reference?
I mean some attributes such as -moz-border-radius that is just for Firefox or -webkit-min-device-pixel-ratio. These examples work just in a specified web browser. I want a complete reference for these attributes.
Each vendor should maintain a list of custom CSS extensions. The ones I've found are linked below.
Mozilla (Firefox)
Opera
Safari (merged with standard CSS properties)
Internet Explorer (outdated)
Ones I can't find ...
Chrome (same engine as Safari, some slight differences in vendor extensions supported)
Peter Baverloo's table is the best reference I have been able to find for all browsers in one single page.
Check out css3files. It's a site that talks about all popular css3 functions, in what browsers they work and what code you need to use.
You can take a look at this page: http://caniuse.com/
It also shows most, if not all, HTML5 and CSS3 features and their support.
I dont understand why the HTML5 website I am working on is different in all browsers. I know it must be CSS, but I dont know what.
on Chrome: http://slackmoehrle.com/chrome.png
on Safari: http://slackmoehrle.com/safari.png
on IE 7: http://slackmoehrle.com/ie7.png
on FireFox Mac: http://slackmoehrle.com/firefox.png
the style sheet can be found here: http://slackmoehrle.com/css.css
Can anyone shed any insight?
Many are saying that browser detection is not a good method, but I dont see what to do to make this all work in the various browsers
UPDATE:
without using a CSS reset: http://slackmoehrle.com/test/without-reset/
with using a CSS reset: http://slackmoehrle.com/test/with-reset/
Have a look at using a CSS reset stylesheet
My personal favorite is Meyer's: http://meyerweb.com/eric/tools/css/reset/
The only real problem with browser detection is the fact that if newer version of browser will support some new features (rounded borders for example), but you still will be doing some workarounds.
Better approach is to use feature detection, so you will be able to use some specific browser capabilities if it has support of them and some graceful degradation pattern when something isn't supported.
For CSS most pragmatic approach is to have reset CSS included for all browsers, then have some common CSS rules which look the same in all browser and additional CSS files for different browsers which contain rules that should be different for different engines.
From my latest experience it's almost always possible to maintain only two versions of these DIFF files - one for Firefox, Safari, Chrome and another for IE family. And use feature detection for JS.
First of all, no version of IE can handle the new elements of HTML5 without javascript help. Only modern browsers can and IE is not a modern browser.
As far as the other browsers go, I'll have to look more but I've not had any issue with any sites I've done but, then, I don't use CSS resets and set all the CSS on the elements myself.