Although it is not good practice, I am looking for a CSS hack to target Palm webOS.
The problem is that Safari 3+ is awesome, and I can do some things like gradient background animations on text, but only in Safari.
Right now I use #media screen and (-webkit-min-device-pixel-ratio:0) {} and it works like a charm, no Opera, Firefox, or whatever, because if I set the background to the image as I do in Safari they will all be ruined.
But Palm's browser is based on webkit, and it uses the rules inside, and Palm's browser doesn't support text backgrounds so all I get is the image moving, no text.
I would prefer a CSS hack, but if need be a Javascript one will do.
Easiest way I've ever foundof targeting browsers is the CSS Browser Selector plugin. You have one CSS file and tell it to target browsers with a selector like
.ie .myelement div
{
border: 1px #ccc solid;
}
.webkit .myelement div
{
border: 1px #f0f dashed;
}
Works great for me!
Hope it helps you out.
Related
I know about:
#-moz-document url-prefix()
But how about the inverse? Specifically, I'm having an issue with some mobile devices adding a border radius to text input elements which I don't want. If I set border-radius: 0 Firefox renders it like this:
Which just looks terrible. I'd just like to be able to apply a rule to everything but not Firefox since it seems to be very picky about messing with form element styles.
Is this what you're looking for perhaps? I use this reset for webkit browsers that add that border-radius, this does not affect FF:
input[type="text"] {
-webkit-border-radius: 0; }
This CSS rule in bootstrap.min is causing a dotted outline to appear on the left and bottom edge of buttons in IE 11 (IMO it looks terrible, like some kind of graphics glitch), but it does not appear at all in Firefox or Chrome:
.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{
outline:thin dotted;
outline:5px auto -webkit-focus-ring-color;
outline-offset:-2px
}
Why is outline specified 3 times, and how is IE handling it differently than Chrome and Firefox?
By the time, you might get the solution for your question.
I have used below code to fix my IE10 & IE11 styling issues. These are the conditional styles for IE. This could be useful for future references.
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
button:focus{
outline:1px dotted #ccc;
}
}
I just had to deal with this stuff :/
You have 2 different properties here: outline, and outline-offset.
For each property, the last value that a browser understands is what will be applied. So, for the property outline, Chrome and Firefox understand the value 5px auto -webkit-focus-ring-color;, which comes after the value thin dotted, so Chrome and Firefox apply the value 5px auto -webkit-focus-ring-color to the outline property. IE does not understand that value, so it applies the value thin dotted.
IE does not support outline-offset, which is why you see the outline on the left and bottom edge but not the rest. To get the outline to show all around, I added a margin.
I would like to know how to apply border-radius to IE8 and below IE8 browsers.
I know that border-radius is a HTML5 feature and IE8 doesn't support it.
I found that by using .htc we can achieve this but by using htc I am encountering the problem of black background.
I am unable to overcome this problem.
Is there any other way of applying border-radius to IE8? If so can anyone explain me how?
Option 1
http://jquery.malsup.com/corner/
Option 2
http://code.google.com/p/curved-corner/downloads/detail?name=border-radius-demo.zip
Option 3
http://css3pie.com/
Option 4
http://www.netzgesta.de/corner/
Option 5
See this question
EDIT:
Option 6
https://code.google.com/p/jquerycurvycorners/
Firstly for technical accuracy, border-radius is not a HTML5 feature, it's a CSS3 feature.
The best script I've found to render box shadows & rounded corners in older IE versions is IE-CSS3. It translates CSS3 syntax into VML (an IE-specific Vector language like SVG) and renders them on screen.
It works a lot better on IE7-8 than on IE6, but does support IE6 as well. I didn't think much to PIE when I used it and found that (like HTC) it wasn't really built to be functional.
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features
http://css3pie.com/
................................................................................
The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera, because it is CSS3 property.
so, you could use css3pie
first check this demo in IE 8 and download it from here
write your css rule like this
#myAwesomeElement {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(path/to/pie_files/PIE.htc);
}
note: added behavior: url(path/to/pie_files/PIE.htc); in the above rule. within url() you need to specify your PIE.htc file location
As the answer said above, CSS PIE makes things like border-radius and box-shadow work in IE6-IE8: http://css3pie.com/
That said I have still found things to be somewhat flaky when using PIE and now just accept that people using older browsers aren't going to see rounded corners and dropshadows.
HTML:
<div id="myElement">Rounded Corner Box</div>
CSS:
#myElement {
background: #EEE;
padding: 2em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
behavior: url(PIE.htc);
border: 1px solid red;
}
PIE.htc file can be downloaded from http://www.css3pie.com
It looks the way I like in chrome and safari. but it looks very strange in firefox. It appears to be cut off.I wonder if there is better way of archiving the same results as in chrome and safari for this other than use an actual image of square box. Any ideas? Hacks?
http://jsfiddle.net/vf6gh/
.square {
border:1px solid #0C6DBE;
background-color:#4293D9;
padding:5px;
}
<img class="square"></img>
Firefox applies some CSS to broken <img> tags:
img:-moz-broken:before,
input:-moz-broken:before,
img:-moz-user-disabled:before,
input:-moz-user-disabled:before,
img:-moz-loading:before,
input:-moz-loading:before,
applet:-moz-empty-except-children-with-localname(param):-moz-broken:before,
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled:before {
content: -moz-alt-content !important;
unicode-bidi: -moz-isolate;
}
If you're really planning to use <img> to simply show an square as you want, rethink it. Those tags were not made for this, and Firefox is a proof of this.
For knowledge: user-agent CSS marked with !important cannot be overriden.
I'm using Sass to generate my CSS stylesheets. I want consistent typography, so I want to use the CSS rules from http://orderedlist.com/our-writing/resources/html-css/thinning-text-in-webkit-safari/ to thin the text in Webkit-based browsers. I thought this would do the trick:
body
-webkit-text-stroke: 1px transparent
#media only screen and (max-device-width:480px)
body
-webkit-text-stroke:0 black
The first part works fine, but the second part (the exception for mobile Safari) renders to
#media only screen and (max-device-width:480px) { }
Hmm! Now, apparently the next major release of Sass will support brackets, so I'll probably just be able to drop in the CSS version then. But is there a way to do what I'm trying to do in a properly Sassy way? I already tried escaping the #media only line with a \, but that seemed to cause Sass to ignore that section altogether.
You need to have a space between the colon and 0.
body
-webkit-text-stroke: 1px transparent
#media only screen and (max-device-width:480px)
body
-webkit-text-stroke: 0 black
The space disambiguates the property syntax from selector syntax.