I have noticed that when I look at a rule I have written say for example:
label {
font-size: 12px;
position: absolute;
padding: 9px;
color: #666;
}
In firebug, it translates as:
label {
color: #666;
font-size: 12px;
padding: 9px;
position: absolute;
}
Basically, reordering the styles. Why?
Is there an 'ultimate' priority I could be putting in my styles to improve load speeds? Ie is there a load order I'm unaware of?
The order of styles in your rule does not matter. Firebug seems to sort alphabetically in your case (it may be incidental).
Of course the order will do play role in this, problematic, case:
.foo {
background: url(foo.png) top left repeat-x;
background-image: url(bar.png);
}
Yes the order matters:
label {
font-size: 12px;
position: absolute;
padding: 9px;
color: #666;
font-size: 15px;
}
The font-size (15px) will overrule the 12px
In general: Yes, order does matter in terms of what properties will actually be set.
You can Google for many links on CSS precedence, for example:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
But as far as what you see in the debugger - that's not at all significant for how the CSS will actually be rendered. The order of "color", "font-size", "padding" and "position" in this particular class are simply an artifact of Firebug.
Well, as the others stated before, the order is important in letting the browser choose, which rule to use, but in order of performance I haven't heard of something like this. As CSS is just a text file the downloading speed will not be affected. BUt I don't think anyone has examined this topic with some test cases.
Related
So I made a small change on the page (gesher-jds.org/giving):
Donate Now, Pay Later
to
Donate Now, Pay Later
and now the design of the right calculator has changed (more like the button as I see). How do I fix it? Both of them looked the same (besides the text). I tried to add the code below to the CSS but it still didn't work. What I'm doing wrong?
CSS
a#payLater {
background: #60426c;
width: 100%;
display: inline-block;
margin-top: 20px;
padding: 10px;
text-align: center;
color: #fff !important;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
text-decoration: none !important;
}
If you apply the styling in the dev tools it works like expected. The reason it does not work in your working environment is probably because your styles are overwritten by different styles. Check the dev tools to see which styles are applied
Potential fixes:
1) Tidy up the "!important" rules.
2) Build stronger selectors -> keyword to look for knowledge [CSS Specificity]
If you set !important in one CSS rule, it'll become hard to overwrite that because !important = 1000 Specificity points so the rule is really strong
I can't seem to change the font-size for the Ionic input. I've tried
input {
font-size: 30px;
}
but that doesn't work. However,
input {
font-family: Times;
}
works, so I don't know what exactly is the problem. I can't even change the height of the input as
input {
height:100px;
}
does not work.
However, when I take out the line in my HTML referencing the Ionic CSS, (lib\ionic\css\ionic.css), my CSS works. I think my CSS should be overriding the Ionic CSS as my CSS comes after it, so what's happening, and how do I fix it?
EDIT:
Even if I put !important, it doesn't work. Interestingly enough,
input {
height:100px; !important
font-family: Times;
}
makes it so that the font doesn't change, while
input {
font-family: Times;
height:100px; !important
}
does change the font.
EDIT2: The problem was with selector specificity:
textarea, input[type="text"]... {
display: block;
padding-top: 2px;
padding-left: 0;
height: 34px;
color: #111;
vertical-align: middle;
font-size: 14px;
line-height: 16px;
}
was overriding it, so I just changed my CSS to
input[type="text"] {
font-size:30px;
}
and it worked!
It is very likely that the specificity stated in the framework is greater than what you are providing in your CSS.
Using dev tools to track down the specific style by inspecting the element should show you how the framework defined its selector.
As some have mentioned, using !importantcould solve this, but it is not a recommended solution as it cheat its way to the max specificity and can't be overwritten later on, except by being more specific with a selector and including the important statement.
You need to put !important before semicolon.
I was looking for a grunt tool to parse my css and tell me when I can convert longhand css properties to shorthand. My way of thinking that this makes css smaller, easier to understand.
So basically if it will find
.mydiv{
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;
font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;
}
It would change it to:
.mydiv{
background: #000 url(images/bg.gif) no-repeat top right;
font: italic bold .8em/1.2 Arial, sans-serif;
}
To my surprise I was not able to find such plugin, but on the other side I found a lot of them which convert shorthand properties to longhand. This raised a question:
why do people want to convert their nice and clean shorthand equivalents to longhand? is there any valid reason except:
I like it to be longer
some really outdated browser like IE 7 screws up something. (by outdated I mean IE <=7, chrome, ff, safari 2 versions lower then current)
P.S. also I am not asking for a grunt plugin, if someone knows one, please let me know.
P.P.S I saw this question and the person is concerned with: performance and documentation. I do not care about these things because: people in my team can read and understand shorthand and prefer it, and I know that performancewise (for parsing rules) it makes really tiny difference (if any) and it is smaller in case of bandwidth.
What I am concerned is that may be I will get different representations in some browsers.
Sometimes is necessary, so you can exercise finer control over your styles so that you can create things outside the typical case.
Consider this example of long hand border syntax:
section{
max-width: 60em;
margin: 0 auto;
}
p {
border-color: black;
border-style: solid;
border-top-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
}
This creates a very different border then usual. There is no way to accomplish is such a terse way with short hand alone.
Demo: http://codepen.io/agconti/pen/sixaL
Can I have hand please? I am struggling to over-ride the CSS on the Wordpress Custom Fields Search plugin, which seems to use the same style for search boxes that appear in the widget and the page. If you look at http://www.landedhouses.co.uk/parties/, the white text is visible by the search boxes in the widget but not so visible on the page. Any ideas how to fix this!? Unfortunately adding this to the page's php didn't achieve anything:
<h2>By size and price</h2>
<p style="color:000;"><?php if(function_exists('wp_custom_fields_search'))
wp_custom_fields_search(); ?></p>
Many thanks!
This is the style rule that is causing you problems.
/* searchforms.css line 15 */
.searchform-label {
display: block;
float: left;
width: 200px;
overflow: hidden;
font-size: 1.1em;
font-family: sans-serif;
font-weight: bold;
padding-top: 4px;
color: white;
}
You can do a few things using css. You can make an overwriting rule in the style sheet:
.searchform-label {
color: black;
}
if that doesn't work, you can make a more specific rule:
label.searchform-label {
color: black;
}
or you can in the worst case scenario make an !important rule.
.searchform-label {
color: black !important;
}
As an extension of the above answer (i still cannot comment :( )
Generally speaking, a more specific rule will override the property if the original is not using !important,
so as the original targets .searchform-label, you just need to target something more specific, such as label.searchform-label, and if that doesnt work, include a direct parent element and a > e.g. if the label is wrapped in a P, use p>label.searchform-label
there should rarely be a need for !important, although they should make a !notimportant, for easy override :D
Iam needing help with my footer in CSS.
I'm a new wordpress developer and I get the gist of how to work with it but as usual I've run into a problem, it's probably simple too, as I'm not sure exactly how to pick out the certain CSS snippets I need. I use Firebug but sometimes I just not sure whats happening with my CSS I guess.
This is my testing site so you can have a look at what I'm going to be talking about. In my footer, my last < li > element (the Archives) I'm hoping to get up right underneath Follow Us. I can always us the last child css rule however I know IE ignores that. So whats my next option? I know what to do if wordpress has given the lists individual styles but in this case it hasn't, so I'm not sure what to do.
CSS
#footer { width: 100%; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px;/*border: 1px solid #0C0;*/}
.footer-widgets { width: 960px; margin: 0px auto; padding: 0px; /*border: 1px solid #fff;*/ }
.footer-widgets li { width:280px; height: auto; list-style-image: none; list-style-position: outside; list-style-type: none; float: left; color: #fff; padding: 13px; margin-right: 10px; /*border: 1px solid #fff;*/ }
.footer-widgets li ul {color: red;}
.footer-widgets li ul li {color: #fff; margin-left: -50px; margin-top: -15px;}
What is the best way to make this work? Any help is appreciated!
If you need to support browsers that do not accept a :last-child selector then you have two options.
Manually add a class to the last element and style it.
Use javascript to find the last <li> and add a class, then style it.
[edit]
Unfortunately, the very handy lastElementChild that was introduced in the W3C Traversal Spec is also not supported in IE8/7. That leaves you, again, with two options.
Use a library like jQuery, which has very simple $('.footer-widgets li:last-child') selector
Use regular js and find the element through tedious DOM traversal.
I would say it's silly to use jQuery for this one thing, but if you will be doing other javascript stuffs on your site, might as well use jQuery, right? Otherwise, I would stay away from the DOM traversal as it's just a pain. Just manually put a class on the last <li> and be done with it :)
There are 2 alternatives I see:
Add a class to your last element and take it with JavaScript to do your own manipulation.
Use jQuery to get the nested elements (unnecessary I think).
Example:
$('.yourElement').css('property', 'value')
Complement:
Getting any element with JavaScript:
var x = document.getElementById("id");
I suggest you to take a look at this W3C documentation with an example. Right after you get the element with JavaScript comes manipulation anyway you need it.
I think it may help you!