My checkbox have a default webkit style like this:
input[type="checkbox"] {
-webkit-appearance: checkbox;
box-sizing: border-box;
}
Now the checkbox is not working in IE8.
I have tried to overcome this by adding:
<!--[if IE 8]>
<style>
input[type="checkbox"] {
font-size: 12px;
line-height: 1.2em;
/*-webkit-appearance: none; */
}
</style>
<![endif]-->
this to my HTML ,but still it's not working.
As I am not a front end developer ,if there is any thing wrong in the question please feel free to edit.
Note:From the comments i got to this question I understood that webkit styles won't work for IE.So I think i need to find a way to just show default check box style with out Webkit for IE.Any one have any thoughts?
Styles the begin with -webkit- will only work on browsers that use the Webkit rendering engine.
IE does not use Webkit, and thus it does not support anything that starts with the -webkit- prefix.
The whole point of the prefix system in CSS is to tell us that the prefixed styles are non-standard and/or experimental. They will only work in one specific browser engine.
In many (but not all) cases, where there is a -webkit- style, this are also equivalent -moz- and -ms- styles for Firefox and IE. There may also be some browsers that support the style without a prefix. Therefore, when using a prefixed style, you should always check for browser support and whether you need to also specify other alternative syntax.
But even then, they'll only work if you're using a version of the browser that supports it. IE8 in particular is a very old browser, and lacks support for a lot of more modern browser features.
You should not be surprised if modern techniques don't work in IE8. There are work-arounds and 'polyfill' scripts for some features, but others are simply out of reach for this browser.
If you need to support IE8, you need to make sure that any features you're using are going to work, and if they're not, you need to either accept that and give IE8 users a reasonable fall-back solution (so the site is still usable), or find a work-around or alternative.
A good site to visit to find out whether any given feature works across various browsers is CanIUse.com.
It's because ie is not based on webkit, but chrome and safari are. For your checkbox, theres css tricks with :before and :after pseudo class.
Take a look here for details http://csscheckbox.com/
Related
I am writting css as
.hidetext { -webkit-text-security: disc; }
To showing in table by hidding this text using following code.
<tr><td>Ramp : </td><td class="hidetext"><?php echo $_POST["uma"] ?></td></tr>
This is working on chrome it not working on mozilla.
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
In short, Firefox does not support it.
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security
However, there is a package that aims to provide Cross-browser alternative to -webkit-text-security
https://github.com/noppa/text-security
Any css property beginning with -webkit- is only supported by chromium/chrome based browsers such as Chrome, Opera, Edge and so on. But Firefox is not one of them, hence it does not work.
I've applied css -webkit-text-security: disc; to mask the word as password, but it does not work in Internet Explorer.
Here is my code:
.hide{
-webkit-text-security:disc;
}
<h1 class="hide">HideMe</h1>
It is working on chrome but not in IE.
Please give me the solution.
Thank you.
-webkit- is a vendor prefix:
Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers can experiment with new ideas while—in theory—preventing their experiments from being relied upon and then breaking web developers' code during the standardization process. Developers should wait to include the unprefixed property until browser behavior is standardized.
… used by the webkit rendering engine which is not used by Internet Explorer.
It is so experimental that it doesn't even appear in draft CSS specs. No other browser supports it, or a version of it with a different vendor prefix.
If you want to get that effect, you'll need to apply JavaScript (e.g. by using an invisible password field overlaid on an element for which you add bullet characters based on the length of the value of the input each time the input event fires.
I would like to make my website compatible with all types of internet explorer, as at the moment it is only compatible with IE6, and glitches a lot in newer versions. How can I do this? I understand it has something to do with the code below that I found in a file named "ie6.css". Tha code is below.
/* IE6 specific styles */
.extra-wrap, .news li {zoom:1;}
Firstly, make sure you have a valid <!DOCTYPE>. That's the number 1 reason for browser glitches between different browsers/versions.
If you don't have a doctype declaration at the top of your page, the browser will go into Quirks mode, which will cause you problems.
Give it a valid doctype (best go with <!DOCTYPE html>). That might cause other issues in the short term, but once you've fixed those it will be much better at working properly cross-browser.
Secondly, does it work in other browsers (Firefox, Chrome, etc)? Modern IE versions are generally standards compliant, so if it works in other browsers it should work in IE10/11. If it works in other browsers and not IE11, then you probably have some IE-specific hacks that were needed for older IE version but don't need to be there for newer versions. Get rid of those.
What does <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> this and other similar IE code lines mean in an HTML5 document?
If I have to make certain css features compatible to IE8 or lower version, does above mentioned code line or html class as mentioned within it helps?
If #2 answer is 'No', then should I use conditional IE stylesheet as mentioned in this article -- http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
If #3 answer is also 'No', then what should be done to make css features compatible in older IE versions. Any reference website / demo would be a great help!
This is a conditional IE statement. They are only read by IE. Any other browser will read them as any normal comment, note the <!-- and --> at the beginning and end of the statement respectively. IE has special code that recognizes this comment and uses whats inside the comment as regular HTML. In specific to your pasted code above, the IE conditional statement is applying a class of ie6 to the HTML tag. In this way you can provide IE only fall backs for certain elements by first referencing that class in your css selector. For example .ie6 #header {} will only apply to the header if the IE6 class is present, and that class will only be present in IE6 because of the conditional statement.
Following the same style as above, you would use this bit of code: <!-- [if IE 8]><html class="ie ie8" lang="en"><![endif]-->
You could use an IE stylesheet if you so choose, either way you would achieve essentially the same result. I personally would use the above method with the class on the HTML tag, and then a separate css file that is loaded normally called ie.css. Inside this file, you would have nothing but IE styles. Note that with this method the stylesheet does not need to be setup in a conditional IE statement. It's only real purpose in being a separated stylesheet is for organizational purposes. I would also only do this if you have a moderate to large amount of IE conditional code. If you have minimal IE fall-back code, simply include the code next to your the code it is fixing inside your master stylesheet.
You can also expand IE support to a certain extent using things like Modernizr and Selectivizr
All the examples you've discussed in the question are aimed at detecting whether the browser is IE (and the IE version), and then trying to deal with it from there.
Please note that this is not considered best practice.
If you need to handle browser differences and missing features, then the best way of dealing with it is to use a technique called feature detection, rather than browser detection.
What I recommend is to look up a library called Modernizr. This is almost certainly a better starting point for what you're trying to do than any of the ideas in your question.
For fixing specific browser features, The Modernizr team also provides a list of additional libraries called "polyfills". Work out which features you need to support, and look through the list to find a polyfill script that does what you need. Some of them are best loaded via Modernizr; others can be run on their own.
I'd avoid doing any browser or version detection, unless it's absolutely a last resort.
One thing to bear in mind when using polyfills: There are a lot of browser features that are missing in older IE versions. There are also polyfill scripts that will help you implement the majority of them. However, please don't think that you can simply include every single polyfill and turn old IE versions into a more modern browser.
The simple fact is that old IE versions are old and slow. Adding polyfills will make them slower. You should carefully consider each feature, and decide whether it's really necessary to polyfill it. Will the site still be usable without it? In many cases you will be better off simply letting old browsers work without certain features.
As #FDL pointed out, use a conditional stylesheet if you've got a moderate amount of styles to apply various versions of IE.
For minimal positioning tweaks, I use html classes (like ie8 or ie9) and just drop the modifications into my master stylesheet.
For example:
.filter-bar .item { float: left; vertical-align: top; }
.ie8 .filter-bar .item { position: relative; top: 2px; } /* fix a gap in IE8 */
1) It means if you have Internet Explorer version 7 and below, include this class inside the html tag
2) Yes, you can have css like this:
html.ie.ie6 .someClass {
color: red;
}
This will only get applied if IE is version 7 and below
3) You can do that too. Sometimes you need to combine both
4) N/A
Will we need to use a CSS Reset if we don't consider any version of IE (Internet Explorer)?
I'm making a website where I don't necessarily to consider any version of IE. Would it be OK to not to reset anything for Safari, Chrome, Firefox and Opera?
Is it only IE which forces us to use a CSS reset, or do other browsers also have inconsistencies?
The point of css reset files isn't solely to make certain functionality work in older versions of internet explorer, it's to make the job of presenting using css the same between browsers.
Yes, you would still need to if you want to support many browsers. It is not only Internet Explorer that needs reset.
Which browser was it, I forgot, but either it was Firefox or Opera that had different default settings too, not just IE.
Nevertheless, it is a safe move to do, and you can rest assured that it will save you a few problems.
Usually, a reset is only about a few kilobytes, which is not much.
I think this post here should give you a good idea WHY to use RESETS and how it isn't ONLY about IE (flavours) that cause problems:
... there are all kinds of
inconsistencies, some more subtle than
others. Headings have slightly
different top and bottom margins,
indentation distances are different,
and so on. Even something as basic as
the default line height varies from
one browser to another—which can have
profound effects on element heights,
vertical alignments, and overall feel.
http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/
You always should use a reset.