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.
Related
For this website:
https://pfiservices.net/
The button in the form appears in white characters on PC. The background is also white, so it can't be read. I'm trying to style it white.
I've tried this CSS:
#nf-field-11.ninja-forms-field.nf-element{
color: #115172 !important;
}
And this one:
.themebutton #media only screen and (min-width: 768px){
color: #115172 !important;
}
And many more.
Also, I've edited the Theme CSS which makes the text inherit that white color. It keeps loading the previous version.
Nothing seems to work. I don't know what to do anymore.
I appreciate any help on this issue.
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.
According to the W3C, user important style declarations are supposed to have the highest priority, higher than author important declarations, but I'm not seeing that happen. If you go to jsfiddle (intentionally blank, I'm referring to the site itself), and look at the styling for the iframe, you'll see the following:
#content textarea, #content iframe
{
background: none repeat scroll 0 0 #FFFFFF;
border: 0 none !important;
box-shadow: 0 1px 3px #E4E4E4 inset;
}
I made a user style (using stylish) with the following css:
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document domain("jsfiddle.net") {
iframe
{
border: 4px solid red !important;
}
}
When I applied it, nothing happened. If I use firebug to disable the rule or remove the !important specified by jsfiddle, it works. It also works if I change the selector in my user style to #content iframe.
W3C specifically states: 3. Sort rules with the same importance and origin by specificity of selector Since the user style rule should have higher importance, specificity shouldn't have any effect here, so why does the style not apply when using only iframe as the selector?
(tested using firefox 24.2 in case that matters)
Since I haven't gotten an answer, let me give an actual example of what I'm trying to do, and why changing the selector won't help. Here's a dabblet demonstrating the exact html/css/js I'm dealing with.
The following userstyle properly applies a red border, but has no effect on the text color.
#-moz-document domain("preview.dabblet.com"){
#test
{
color: white !important;
border: 1px solid red;
}
}
Using a userstyle, how can I force the text to always be white?
You are correct that an !important declaration of origin "user" should take precedence over any declaration of origin "author", regardless of importance or specificity. However you are making an assumption that Stylish applies its styles with the "user" origin.
Since Stylish 1.4.1 for Firefox, it will apply styles with "author" origin by default. One reason for this change was compatibility with Stylish for other browsers. Their APIs only allow Stylish to add "author" origin styles, which meant that a style that worked in Firefox didn't work in Chrome. Yours is one example of where this would be the case.
The best way to fix this (and to ensure compatibility with other browsers, should you share your style on userstyles.org), is to increase the specificity of your selector to something greater than that of the site's CSS. The simplest way to do so would be to use the same selector as the site, but add a body type selector at the start:
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document domain("jsfiddle.net") {
body #content iframe {
border: 4px solid red !important;
}
}
There are cases where this isn't feasible: a style that affects iframes on many sites that couldn't be so specific with its selector, or a style trying to override an !important declaration inside an HTML style attribute. Stylish for Firefox allows you to switch your style to the "agent" origin with a special comment: /* AGENT_SHEET */. This will have the effect of your !importants beating anything the site can do (much like the "user" origin), but it will not work in other browsers and can cause bad things like crashes, so this is only suggested if the above method is completely unworkable for you.
All of this is described on Stylish's wiki along with some info less relevant to your situation.
You're right on with the specificity idea. The problem is both your rule and jsfiddle's rule use !important which means both rules have the same priority, but the #content textarea, #content iframe rule is more specific.
To solve, you could write your rule as:
#content iframe {
border: 4px solid red !important;
}
See this for more details: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#CSS_parsing
That section will give you what you need, but the whole article is extremely interesting.
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.
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.