I've been using em-calc for CSS size definitions in my Zurb Foundation projects so far. However, recently I've noticed developers using rem-calc more and more.
I know what each function does, but I don't really understand when I should use em-calc or rem-calc.
What is the difference between these two functions?
Well in fact your question is some kind of duplicate of How does rem differ from em in CSS? (and Practical difference between rem and em units) and so on
em-calc() returns the em value of your input in pixels, whilst
rem-calc() returns rem units. In practice that means that when you use rem-calc() to set the font-size of a selector the font size is relative to the font size of the html attribute instead of its direct parent.
You can see the diffence in the following example:
html
<body>
<section> section text
<small>small text</small>
</section>
<section class="rem"> section .rem text
<small>small text</small>
</section>
</body>
sccs
section {
font-size: em-calc(24);
small { font-size: em-calc(12); }
}
section.rem {
font-size: rem-calc(24);
small { font-size: rem-calc(12); }
}
The result of the above will look like that shown in the image below:
Now change the font size of the section tags:
section {
font-size: em-calc(48);
small { font-size: em-calc(12); }
}
section.rem {
font-size: rem-calc(48);
small { font-size: rem-calc(12); }
}
Notice that because of both section tags are direct parents of the body using rem-calc(48) or rem-calc(48) for the font-size of the section in the above wont make any difference for this example.
Now the result will look like as follows:
As you can see, the font size for the small does not scale with its parent.
Personally i think you should use rem-calc() for the main structure elements of your page (header, footer, content, navigation etc.) and em-calc() for the element nested in the preceding main elements.
So for the example use here:
section {
font-size: rem-calc(20);
small { font-size: em-calc(10); }
}
Related
I would like to have extra space before a header in the middle of my
document but not the first header at the top of the page.
That seems like it would be a common situation but I have to
manually specify it.
In other words. I want this
but if I specify
h1 {
margin-top: 1.83em;
}
Then I get this ugly extra space at the top
I get that I can fix it by manually specifying the top header. For example
h1 {
margin-top: 1.83em;
}
h1:first-child {
margin-top: 0.66em;
}
But I'm wondering if there is some other way(s) and what the tradeoffs are. I can certainly add a class or an id to the first header and change the CSS to use that class or header but I'm assuming this is a common pattern so I'm wondering if there are common solutions.
Use the :not pseudo class to define the style for all h1, but the first:
h1:not(:first-child) {
margin-top: 1.83em;
}
<h1>first</h1>
<h1>second</h1>
<h1>third</h1>
I am looking for a way to set a print-devoted css that shows a fixed title on every page.
Unfortunately, I couldn't manage to print this title nicely on the 2nd page, since it always "walks on " the table, ignoring declared body padding / margin ... though I am quite sure the body is not suited here, I couldn't find any working way.
Any idea?
<h2 id="tableTitle">Fixed title</h2>
<button class="noPrint" onclick="myFunction()">Print this table</button>
<table>...content fitting at least 2 pages ...</table>
...
body{
margin-top:100px;
}
#tableTitle {
position: fixed;
top : 0;
}
Here's the fiddle
I am trying to have two different Font Sizes in the same Table th cell
My code is as below but does not appear to work i.e. the (Frm) stays at font 14
Please help
echo "<th width='70%' style='background-color:#FFD8D8;font-size:14px' colspan=\"14\"><left>".$startlocation."<style='font-size:8px'>"."(Frm)"."</left></th>";
There is no such element called <left>. What I would recommend you do, is add classes to your elements instead of using inline styling through style=.
th {
width: 70%;
background-color: #FFD8D8;
}
.left {
font-size: 8px;
}
.right {
font-size: 14px;
}
Then you can add a <span> tag around your text, which can look something like this as your final code:
echo "<th colspan=\"14\"><span class=\"left\">".$startlocation."</span><span class=\"right\">(Frm)"."</span></th>";
I'm not sure what your other text is inside the <th> element, but doing what I did will solve it. It's also best practise to use classes and IDs instead of inline styling, as it's easier to change in the future.
EDIT: If you absolutely need to to inline styling, this will work:
echo "<th colspan=\"14\"><span style=\"font-size:14px\">".$startlocation."</span><span style=\"font-size:8px\">(Frm)"."</span></th>";
Insert <span> like this:
...$startlocation."<span style='font-size:8px'>"."(Frm)"."</span></left></th>"
so that you can specify style of some element the way you tried.
I don't have much experience on UI development. I have a class defined in CSS, something like this-
.myclass {
color: red;
content: "my content";
font-size: 12px;
padding-right: 2px;
}
I want "my content" value to be internationalized (to be displayed as my content in English and something else in another language). Is that possible achieve it through CSS code?
I would suggest to separate your localization from CSS, since it is primarily meant for styling and you'll be probably localizing the HTML anyway. If it is possible for your to add another attribute to your HTML you could try using content with an attr() value to reference a data attribute from the selected HTML content. So with HTML like this:
<div class="myclass" data-value="My Content"></div>
You can access the data attribute like this:
.myclass:before {
content: attr(data-value);
}
Keep in mind that the content property can only be used on pseudo elements. For further info I'd recommend you the MDN page about the content property.
I am not sure about it but most probably you are looking for this
http://www.w3.org/International/questions/qa-css-lang
The best way to style content by language in HTML is to use the :lang selector in your CSS style sheet. For example:
:lang(ta) {
font-family: Latha, "Tamil MN", serif;
font-size: 120%;
}
You could consider using CSS variables (i.e. var() with custom properties), if it blends in with your surroundings:
:root{
--text-my-content: "my content";
}
.myclass{
content: var(--text-my-content);
}
Thus, the localized portion is outsourced from the actual style. Now, you can define the locales elsewhere (e.g. generated from a text database or hard-wired in an i18n-only CSS file or even grouped together on the top of your stylesheet):
html[lang="de"]:root{ --text-my-content: "mein Inhalt"; }
html[lang="en"]:root{ --text-my-content: "my content"; }
html[lang="fr"]:root{ --text-my-content: "mon contenu"; }
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Should css class names like 'floatleft' that directly describe the attached style be avoided?
I was wondering what the best practices were for the naming and usage of CSS classes.
For instance, in a scenario where you want to center the text of both the button text and the header text, is it better to repeat this style in both classes like
.button-text {
text-align: center;
/*some properties*/
}
.header-text {
text-align: center;
/*other properties*/
}
Or is it better practice to move that style out into a separate class like
.center {
text-align: center;
}
.button-text {
/*some properties*/
}
.header-text {
/*other properties*/
}
and have the class of "center" applied to elements that have the classes of "button-text" and "header-text".
What it comes down to, is, should CSS class names represent what an element is "button-text" or "state, what an element looks like "center"?
Thanks!
A CSS class should represent what you use the element for, not what the element looks like.
Consider that you have headers that are red and bold, and change the design to large blue letters instead. If you named your classes after the look of the headers, you end up with:
.RedBold {
color: blue;
font-size: 200%;
}
Having a class named center is definitely the wrong approach - this class name already implies the presentation, that's not the point of defining presentation in a separate file. A better way to avoid code duplication would be:
.button-text, .header-text {
text-align: center;
}
.button-text {
/*some properties*/
}
.header-text {
/*other properties*/
}
Another option is specifying multiple classes, e.g. class="button text" instead of class="button-text". This gives you:
.text {
text-align: center;
}
.button.text {
/*some properties*/
}
.header.text {
/*other properties*/
}
Unfortunately, this approach has to be ruled out if you need to support MSIE 6.0, all other browsers (including newer MSIE versions) deal with multiple classes correctly. As other people already noted which solution you choose is mainly a question of maintenance - choose the one that will be easier to change and adapt to new requirements.
Maintainability is king. Whatever you find most easy to maintain - in my opinion, this is your second example.
It depends how much you will center text, the issue with the second point is that you could then end up with a long list of classes added to each element in your HTML which isn't so clean.
If these happen in, for example, a p tag a lot, then you'd possibly be better off putting one class in the parent so the children can inherit it.
i tend to group items together example like
.button-text, .header-text{
text-align:center
}
then if they need something unique add that to another
ie
.button-text{
font-size:22px;
}
.header-text{
font-size:44px;
}
class name's should be usefull but its not a biggie, just ensure they are unique. Often i name things based on their hierarchy within a page or section, as to prevent any accidental duplication.