So I had this idea to use EM values for borders on a bunch of elements as variables, based on a parents font-size, this would reduce a lot of redundant code for me. It all worked fine until I realized that some browsers/users have a minimum font-size, that you cant over ride.
The minimum values in some browsers seem to range from 6px to 12, or even more if the user has modified it. As Im not using this for font size it, is there any other trick i can use to set the width of a border without hard coding a pixel value?
Below is an example of what I was hoping would work cross browser, but for example in Firefox/Cyberfox, for me, it gives a 6 pixel wide border instead of 2 px:
.parent{
font-size:2px;
}
.child{
border:1em solid black;
}
<div class="parent">
<div class="child">
Hello world!
</div>
</div>
requirement: no sass, no js, just need pure css.
As someone else has mentioned in commends, em pixel equivalent is based on the parent font-size.
When dealing with user stylesheet overrides, you can never fully guarantee that your styles will override those of the end user. You can however utilize the !important directive and make your rules as specific as possible. You can go overboard quickly, so just test and use reasonable defaults.
html body .parent{
font-size:2px !important;
}
.child{
border:1em solid black;
}
This is going to be a specificity game, but !important is your strongest asset.
Related
We are developing a widget that is intended to be embedded into 3rd party websites. The way it's embedded is dynamically injecting a div inside the body part of the page, using Javascript.
On a page without any or few style rules, the widget looks fine. The problem is: we are seeing various visual issues caused by the widget's style rules overriden by the web page (let's call it host page) it's on, when the host page has many CSS rules, some of which happen to trump the widget's if the widget does not define those rules explicitly (thus the widget inherits these from the host page).
It seems to me the obvious solutions to this is: define ALL CSS rules for each of the elements in the widget. When I say ALL, I mean all CSS rules like background color, etc. for all states like normal, focused. This obviously is a brutal force method, and can result in a good amount of work for just a simple widget. This doesn't really seem too smart.
So my question is: is there any clear-cut facility that allows one to prevent the host page's styles from messing around the widget's?
To give an example, let's say the host page has a CSS rule like this:
div {
border-bottom: 1px solid green;
}
This rule sets the bottom border to transparent for all div's.
Then we merrily define a whole bunch of rules in our widget, except we forget to define the border-bottom rule. In such a situation, all the div's bottom borders are green.
While it's reasonable to add a border-bottom rule for the widget to address this particular issue, the real problem is: you can't control what rules are present on the host page, therefore, in order to be really safe, you have to define ALL rules for ALL elements in the widget for ALL states, which is really cumbersome and error prone for me.
We are aware using iframe would be immune to such issues, but we prefer not to use it, and let's keep it out of the discussion.
We are also well aware of the method to use !important in CSS rules to override previous rules. But this still requires defining full CSS rules (i.e., the brutal force method). Please keep it out of the discussion too.
Thanks.
The all: initial; CSS property is what you are looking for :
The CSS all shorthand property resets all properties, apart from
unicode-bidi and direction, to their initial or inherited value. [MDN]
but it currently has low browser support.
Here is an example of how it can be used :
div div {
display: inline-block;
width: 50px;
height: 50px;
margin: 10px;
background: gold;
border-bottom:5px solid green;
}
#wrap div {
all: initial;
display:block;
height:10px;
background:pink;
margin:1px;
}
<div>
<div></div>
<div></div>
</div>
<div id="wrap">
<div></div>
<div></div>
</div>
Given the following HTML code generated by a Google+ widget
<div id="widget_bounds" class="Yfd" style="width: 290px;">
What should I declare in my style sheet to override the width to be 100%
I have tried the following
Corrected typo
#widget_bounds, #widget_bounds .Yfd, #widget_bounds .Yfd[style], #widget_bounds[style], .Yfd{
width:100% !important;
}
and various combinations of to no avail.
Other options I have tried are
#widget_bounds, #widget_bounds .Yfd, .Yfd[style], #widget_bounds[style] .Yfd, #widget_bounds[style] .Yfd[style]{
width:100% !important;
}
#widget_bounds .Yfd[style]{
width:100% !important;
}
#widget_bounds{
width:100% !important;
}
.Yfd[style]{
width:100% !important;
}
From reading some comments I think the point has been missed that the HTML has been generated from a Google+ widget for which I only have the option to set pixel widths. I have a responsive designed website and I need to override the inline style to provide percentage widths.
Rather than down voting and voting to close a perfectly legitimate question I would appreciate it if someone is actually able to answer a difficult question.
update
As mentioned by #niels-keurentjes:
There are a few cases where an inline style can be over-ridden, such
as with the !important attribute or with user style sheets.
style="width: 290px;" is an inline style.
from http://webdesign.about.com/od/beginningcss/qt/tipcssinlinesty.htm:
Inline styles have the highest precedence. That means they are going
to be applied no matter what. The only styles that have higher
precedence than inline styles are user styles applied by the readers
themselves.
For more about the cascade: http://www.w3.org/TR/CSS2/cascade.html
For this reason you can't overwrite it with CSS alternative use jQuery to reset this width:
$('#widget_bounds').ccs('width','100%');
The following one :
#widget_bounds{
width : 100%;
}
Better not to use !important cause it breaks the natural cascading in the stylesheets.
P.S. You should check the spelling. The id is named widget_bounds which is different than widet_bounds from your css definition.
It turns out that I was on the right tracks but it is impossible to have a Google+ widget that has a responsive design, The closest I could get to is having fixed width px values for different sized view ports.
An interesting discussion on this can be found here https://plus.google.com/+DustinStout/posts/CxL5k3EBd4x for anyone looking for a solution to this.
As I understand it, when you use the shorthand property background, the browser first sets all background properties to their default values and then puts in the values that you're declaring. Is it then better to use background-color:white; instead of background:white? Does this change when you are putting in more values such as background position or background image? Or is it always best to declare attributes individually?
I'm thinking that there must be some sort of tipping point where the savings in bytes balance the processing time gained by specifying attributes individually. However, I could be completely wrong - that's why I'm asking here.
I hear you about best practices, but as mentioned the differences in processing and even load time are negligible. There is no best practice for when to use these rules, aside from what makes sense in your stylesheet. The real difference is that they effect inherited properties differently. Setting background-color: white; will only overwrite the background-color rule (whether or not it was originally set with background or background-color) but background will overwrite the any/all background rules set, thus potentially killing background images and associated background-repeat, etc. Here's an example:
.box {
background: url(star.png); // set with just background instead of background-image
width: 100px;
height: 100px;
float: left;
margin: 10px;
}
.box1 {
background-color: blue;
}
.box2 {
background: green;
}
With HTML like:
<div class="box1 box"></div>
<div class="box2 box"></div>
.box1 will show the star.png image (with a blue background if the image is transparent), while .box2 will only show a green background, no image. The best practices lesson with these two rules is to evaluate CSS authoring and inheritance in general — not rendering performance. That in mind, it's generally best to apply background to the most general/abstracted rule of an element, and then overwrite properties on more specific instances, using classes or IDs, with background-color, background-image, etc.
The processing time of your CSS should be neglectable. If you're restraining from using them just because of that, well, don't restrain yourself anymore.
When using just a color, background: color and background-color: color should give the same result.
At then end it boils down to if you prefer shorthands to individual declarations. Usually, shorthands will use sensible defaults values, so it's all right. I usually don't remember the correct order for them (especially the font shorthand), but other than that I think they're fairly okay.
You might be using much more shorthand properties than you expect, anyways. For instance, margin and padding are the shorthands of their -top, -right, -bottom and -left components, and border is the shorthand for border-width, border-color and border-style, which are all shorthands for their border-[direction]-[attribute] properties. By using border instead of all the non-shorthand properties, you're saving like 11 lines.
i have something like this
<body>
<h2>
Blue
<span>
<a ....>add to combo</a>
</span>
</h2>
</body>
and css
#body {font-size: 100%}
h2{font-size: 200%}
a{font-size: 80%}
Now I've been reading up and realize that the a link won't be 80% of 100% but 80% of 200% (of 100%) because percentages are taken from the parents' sizes.
However I'd like all my font-size declarations in percentages without inheriting, but rather just to calculate from some site-wide base font-size - say 16px?
How do you do that?
What you want is not possible with your give code. You want to inherit font 1 particular size, then every font-size in childNodes will be relative to the parent.
if you want to use certain font sizes and not inherit you should explicitly set them
That said never try to use the important statement. Please checkout how CSS assigns his properties to HTML nodes
http://www.w3.org/TR/CSS2/cascade.html#specificity
Try to use "!important" rule:
http://www.w3.org/TR/CSS2/cascade.html#important-rules
I don't think you can override inheritance, since that's part of the cascade of Cascading Style-Sheets.
For your usage you'll either have to explicitly state the font-size (this is likely to get very tedious and error-prone very quickly) for elements using (very) specific selectors, eg:
h2 span a {font-size: 18px; } /* or whatever */
Or reorder your html so that the span is a sibling of the h2, rather than descendant. I agree that it should be possible, though.
What is the definitive way to mimic the CSS property min-width in Internet Explorer 6? Is it better not to try?
foo { min-width: 100px } // for everyone
* html foo { width: 100px } // just for IE
(or serve a separate stylesheet to IE using conditional comments)
You could use an expression (as suggested by HBoss), but if you are worried about performance then the best way to do this is to add a shim inside the element you want to apply a min-width to.
<div id="container">
The "shim" div will hold the container div open to at least 500px!
You should be able to put it anywhere in the container div.
<div class="shim"> </div>
</div>
#container .shim {
width: 500px;
height: 0;
line-height: 0;
}
This requires a little non-semantic markup but is a truly cross-browser solution and doesn't require the overhead of using an expression.
This article on CSS Play, by Stu Nicholls, shows the different methods for achieving min-width in IE, in all modes (Quirks, etc) and even for IE/Mac.
I've fiddled with every answer given here in the past month. And after playing with Pretaul's method (Min-width in MSIE 6), it seems to be the best alternative to min-width. No hacks or anything, just straight up compliant CSS code which takes 30 seconds to implement.
From Googling around, expressions seem to be the most popular. For me anyways, ittended to randomly lock up my browser (both IE and FF).
I dunno, I had some success with:
min-width: 193px;
width:auto !important;
_width: 193px; /* IE6 hack */
A combination of dustin diaz' min-height fast hack & How do I specify in HTML or CSS the absolute minimum width of a table cell
do your css tag as _Width: 500px or whatever.
This works pretty well...
div.container {
min-width: 760px;
width:expression(document.body.clientWidth < 760? "760px": "auto" );
}
Min-height fast hack works for me (also works for width)
The shim example is fine for forcing the browser to show a horizontal scroll bar when the container gets to a certain size but you'll notice that the content in the container will still be resized as the window gets smaller. I imagine that this is not the overall goal when trying to achieve minimum width in IE 6.
Incomplete min-width technique http://www.mediafire.com/imgbnc.php/260264acec99b5aba3e77c1c4cdc54e94g.jpg
Furthermore, the use of expressions and other crazy CSS hacks just isn't good practice. They are unsafe and unclean. This article explains the caveats of CSS hacks and why they should be avoided altogether.
I personally consider scaryjeff's post to be the best advice for achieving true min-width in IE6 and as an experienced CSS layout developer I've yet to find a better solution that is as applicable to problems of this kind.
This article on CSS Play, by Stu Nicholls, shows the different methods for achieving min-width in IE, in all modes (Quirks, etc) and even for IE/Mac.
I've provided an answer to a similar question that details the use of this technique to correctly achieve min-width. It can be viewed here:
CSS: Two 50% fluid columns not respecting min width
The technique is simple, valid CSS that can be used in almost any situation. Applied to the shim example above it results in what I consider to be correct min-width functionality.
Correct min-width technique http://www.mediafire.com/imgbnc.php/a67b2820bfbd6a5b588bea23c4c0462f4g.jpg
Single line button
button{
background-color:#069;
float:left;
min-width:200px;
width:auto !important;
width:200px;
white-space: nowrap}
Use conditional comments to reference and MSIE 6 specific style sheet, then create CSS as below.
Compliant browsers will use:
min-width: 660px;
Then MSIE 6 will use:
width: expression((document.body.clientWidth < 659)? "660px" : "auto");