If I have an exemplary div:
#div {
max-height: 100px;
height: auto
}
vs.
#div {
height: auto;
max-height: 100px;
}
Does it make an difference in an output file?
Order does matter in some cases. For instance, when using vendor-prefixed versions together with W3 compliant properties.
-webkit-transform: ;
transform ;
vs.
transform: ;
-webkit-transform: ;
The browser will use the last property. So always use the W3C compliant property last if it's available!
in your scenario no. But others yes. For example:
.add-margin {
margin: 0;
margin-left: 5px /** element will have 5px on left margin **/
}
vs
.add-margin {
margin-left: 5px;
margin: 0 /** element will have no margins **/
}
as a general rule of thumb, I place all my properties alphabetically unless a special case is needed - this ensures overrides get added correctly (as in case of my first example of code)
As per your scenario properties order not matter.
Most of the developers has no specific plan when it comes to ordering CSS. But I personally suggest a method based on how much impact they have on the selected elements or other elements around them.
Layout Properties (position, float, clear, display)
Box Model Properties (width, height, margin, padding)
Visual Properties (color,background,border,box-shadow)
Typography Properties (font-size,font-family,text-align,text-transform)
Misc Properties (cursor,overflow,z-index)
I came to read this during my research on some css coding standards. You could read more here
No, Properties order does not matter until and unless you are not modifying the same property and you want to switch between the available two or many.
Example:
#div{
color: red;
height: auto;
max-height: 20px;
}
#div{
color: blue;
}
So, in this case, the colour properties are replaced by the last one and the colour will be blue but for the height and max-height the same properties which are assigned in the first place will be reflected and until and unless they are not overwritten.
Related
I have the following CSS problem: a website first import a CSS style file named bootstrap.css (The BootStrap framework CSS settings), then it is imported another CSS file named my-custom-style.css that override some of the bootstrap.css settings (so I can create some custom settings leaving unchanged the bootstrap.css file)
Now I have the following situation, in the bootstrap.css file I have this property that I want to override:
.img-thumbnail {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
display: inline-block;
height: auto;
line-height: 1.42857;
max-width: 100%;
padding: 4px;
transition: all 0.2s ease-in-out 0s;
}
Now I have to override it in my my-custom-style.css file in such a way that the .img-thumbnail object have no border. So I delcare a
.img-thumbnail {
}
and I want to say to CSS that the following field (setted in the **bootstrap.css) must not exist in the overrided file (so I have not the border)
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
height: auto;
Can I do something like this or have I to override it with a specific value?
I tryied to override it with a specific value but I can override the background-color with a new color value (and it work) but when I try to change the border value to 0px it still use the bootstrap.css definition
Can you help me to solve this problem? I think that exist an elegant way to simply say: "don't use the overrided file settings without explicitly override it with new values
Tnx
Andrea
Basically, the CSS engine will decide which rule to use based in 3 things (listed here in order of importance):
!important clauses
More specific rule
Rule order
Now, check out this fiddle.
First, let's talk about the order. We have:
div { background:green; }
and
div { background:gray; }
So, which background CSS will use? green or gray? They are both rules with no !important clauses, and have the same specification level (both are applied for div) only remaining the order to decide. In this case gray comes last so it will be applied to all div elements.
Now, the "specificness" of the rule.
#div1 { background: red; }
This one is a much more specific rule than the other rules that apply only to div elements. So #div1 will have a red background even with a div{ background: gray; } coming later.
And last, but not least !important.
These rules are... important. They can only be overridden by another !important rule that comes later and have the same specific level.
Even if a !important rules is declared in a lower level of specification, it won't be overridden. Like in:
div { width:50px !important; }
#div2 { border:3px solid blue; width: 100px; }
Even coming later and being more specific, width: 100px; will not be applied to #div2.
Now that you know all of this, it's a matter of inspecting the element to see what's going on and then guess "how much power" you'll need to override that rule.
yeah, just override that class in your own css file and add !important at the end
I'm trying to alter the style of something based on wether or not its parent div is being overflown.
.pDiv { display: block; width: 300px; height: 100px; border: 1px solid rgb(0,0,0); }
.cDiv { display: block; padding 4px; border-bottom: 1px solid rgb(0,0,0);
.pDiv:overflow .cDiv { border-bottom: none; }
<div class="pDiv"><div class="cDiv">child 1</div><div class="cDiv">child 2</div><div class="cDiv">child 3</div><div class="cDiv">child 4</div><div class="cDiv">child 5</div></div>
is it possible to do something like this? I would use the last-child pseudo-selector, but the number of children can vary, so I want it to remove the border-bottom of the last-child ONLY IF the parent div is being overflown. I want a pure CSS solution too please, no JS!
CSS cannot select based on used or computed styles of any kind, so you're out of luck.
It seems a handy solution for this is being cooked up: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
According to css-tricks, the feature "#container brings us the ability to style elements based on the size of their parent container."
You should already be able to use it, but beware that not every browser supports this yet.
This way, you might (read the note) be able to get out with something like:
.parent-div {
max-height: 10rem;
overflow-y: auto;
container: size;
}
#container (min-height: 10rem) {
.parent-div:last-child {
border-bottom: none;
}
}
The main idea here being that if the element reached it's maximum height, then it's all but always overflowing — so we just apply the style so long as it's at it's maximum height.
Unfortunately, my own browser does not support this yet, so I can't guarantee you it would work the exact way as it is written above. But if you refer to the 2 pieces of documentation I provided, you should be able to come out on top 🤓
Note:
The css-tricks page also mentions that "Currently, you cannot use height-based container queries, using only the block axis". I'm hoping this simply means using the full size axis is necessary in this case, but I'm not able to test this.
If someone could verify whether this solution works and then leave a comment here, that would be very much appreciated. I'd edit this answer and credit the person.
I have an HTML django template page that is both RTL and LTR (depends on user's locale).
The CSS of this page is stored in another file, and that file is currently static.
What is the best way to switch the attribute left and right according to the locale? Is there a built in attribute in CSS for this problem? (I don't want to use JS, it feels too messy)
I have:
.elem{
left: 10px;
bottom: 10px;
position: absolute;
}
I want something like this:
.elem{
right-or-left-according-to-html-dir: 10px;
bottom: 10px;
position: absolute;
}
Currently the only option I can think of is turning the file into a template also:
.elem{
{{dir}}: 10px;
bottom: 10px;
position: absolute;
}
Is there a better way that will let me keep my CSS file static?
You say you're making the document rtl or ltr depending on locale. In that case you can use the :lang() selector to make certain parts of your document have styling depending on the locale.
http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:lang
http://www.w3.org/TR/css3-selectors/#lang-pseudo
If you want a little more support (IE7+) you could use the attribute selector selector[lang='en'] though that will only test the attribute on the specified selector.
http://www.w3.org/TR/css3-selectors/#attribute-selectors
If you specify the language in the html element (which you should, with lang="en" for example) you can just put the html selector in front of the class you want to apply in certain locales:
.elem {
margin: 0 10px 0 0;
color: blue;
}
html[lang='en'] .elem {
margin: 0 0 0 10px;
}
Even better, if you specified the dir attribute you can directly use that in css like so:
.elem[dir='rtl'] {
margin: 0 10px 0 0;
}
Please note that with a class on the body element you will always depend on that class always being there. But the dir and lang attribute can be specified on a more specific scope, like a single div, and still be used in the css along with styles for the 'other' reading directions.
Edit
Lastly, to gaze into the future, the CSS Selectors 'Level 4' will include a psuedo tag which will be able to filter on text directionality. Of course the specs are in development and adoption by browsers may take years before it is possible to reliably use it:
http://dev.w3.org/csswg/selectors4/#dir-pseudo
How about adding the direction to your body element via a special class, then you can write according selectors:
<body class="rtl">
and in the CSS:
.rtl .myclass {
text-align: right;
}
Take this code:
#wh_wrapper #slider .scrollButtons.left {
width: 100px;
}
the width of 100px is being applied only to:
#wh_wrapper -> #slider -> scollButtons left
If I do this:
.left {
width: 50px;
}
all the
.left
classes has now a width of 50px, including the one from before.
Now, I completely understand how to avoid this error (setting specific classes, putting .left before #wh_wrapper #slider .scrollButtons.left etc..) what I'm asking is if there is a way to specify properties that cannot be overwritten by "global" properties.
I hope I was able to explain myself.
Thanks
EDIT:
I now understand !important :-)
But look at this other example:
#wh_wrapper #slider .scrollButtons.left {
width: 100px !important;
}
.left {
width: 50px;
}
Now #wh_wrapper #slider .scrollButtons.left will still be 100px, but what about:
.left {
width: 50px;
border: 1px solid #000;
}
since I haven't decalred a border before I can't put an important on it, still the #wh_wrapper #slider .scrollButtons.left will now have a border property.
Any way areound this?
Yes, put !important behind them:
.class{
height:100px !important;
width: ...etc
}
Watch out though: Internet Explorer 6 and previous versions simply ignore !important, while IE 7 supports them. More info on this can be found here or here.
!important is something to consider, butyou should try to avoid it. Most of the times it can be avoided by building a better html/css tree or adding a class (try to keep them generic though ;)).
#EDIT: You should always put the most generic selectors on top, and the build down to the more specific ones. for example: put a img{} selector on top to provide a global specifier for all your images, then you go down more and more specific.
wrapper img{}
wrapper container img{}
wrapper container div.something img{}
and so on. Don't try to overdo the classes and ID's, the more generic your html/css is the better. containers and wrappers are often overused and unnescessary. Try to write good semantic html and keep html and css seperated. Don't use css when you should us HTML (and vice versa)
Often it is better to create your whole html file, and when everything looks good, provide css for the finishing touch.
Tried !important?
I tested your code in Opera, Chrome, FF and IE and all prefer the first line over the second one, no matter what the order of the rules is. In the sample you pasted there's a space missing in ".scrollButtons.left" - if I use that code then it (of course) always matches the second rule. Are you sure this isn't the problem?
I am losing hair on this one ... it seems that when I fix width an HTML SELECT control it renders its width differently depending on the browser.
Any idea how to to standardize this without having to turn to multiple style sheets?
Here is what I am working with:
.combo
{
padding: 2px;
width: 200px;
}
.text
{
padding: 2px;
width: 200px;
}
This is my document type for the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Try setting font-size on the selects as well, that can affect how they are rendered. Also consider the min-width and max-width properties.
Form controls will always be less obedient to styling attempts,in particular selects and file inputs, so the only way to reliably style them cross-browser and with future-proofing in mind, is to replace them with JavaScript or Flash and mimic their functionality
input[type=text],
select {
border: solid 1px #c2c1c1;
width: 150px;
padding: 2px;
}
// then
select {
width: 156px; //needs to be input[type=text] width + (border and padding)
}
/*
The input[type=text] width = width + padding + border
The select width just equals width. The padding and border get rendered inside that width constraint. That's just the way SELECT rolls...
*/
Make sure you remove all default margins and padding, and define them explicitly. Make sure you're using a proper DOCTYPE and therefore rendering IE in Standards Mode.
You may use faked dropdown widget and replace the SELECT.
Browsers tend to limit the amount you can style form controls with CSS, because form controls have a lot of complicated styling that varies between operating systems. CSS can’t describe that fully, so browsers put some of it off limits.
Eric Meyer wrote a good article on the subject:
http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/
The best you can do is accept you don’t have complete control over the look of form fields, and experiment with whatever styling is really important.
Try using Firebug or Chrome's "Inspect Element" feature (right click on the select control, click "inspect element") to see exactly what style properties are being inherited/rendered for that specific object. That should lead you in the right direction.
I've tried all these suggestions ... and I finally have it so it looks good in IE and Firefox. Looks like there is something wrong with the padding on the SELECT control. If I increase the width of the SELECT by 2 pixels the now size correctly.
.combo
{
padding: 2px;
width: 206px;
}
.text
{
padding: 2px;
width: 200px;
}
However, Chrome still does not show them the same size.
Martinator is correct.
Sounds like you're trying to control the width of various types of inputs or menus across bowsers. You can directly select the object and specify the width. For example:
select {
width:350px;
}
Or you can do this with text area:
select {
width:350px;
}
Other types of inputs require the syntax Martinator mentions. So, for a text, input, or even file type input, you'd do this for each one:
input[type=text] {
width:350px;
}
input[type=input] {
width:350px;
}
input[type=file] {
width:350px;
}