I have a CSS stylesheet that specifies the font for each paragraph class:
p.body {
font-family: Tahoma;
/* (more properties omitted for brevity) */
}
p.bodytextcenter {
font-family: Tahoma;
}
p.bodytextright {
font-family: Tahoma;
}
(etc. for dozens of styles).
Now I have to use a different font for some languages. I can do this by making a new selector p.body[lang="de"] etc, but I'd have to do that for every style in my list.
Is there a way to specify p[lang="de"] and have it apply to all paragraphs with that language attribute? Or would this require me to remove the font-family attribute from every paragraph class?
p[lang="de"] this may work but if not you can add !important on the font family style
Give this a try:
html body p[lang=de]
...or similar, depending on your actual HTML. You just need to add more levels of specificity.
This can't properly be answered without seeing your HTML; but I'm going to guess that the CSS is poorly structured, and that's what's making this hard for you. Doing the above is slightly hackish, but syntactically legit.
The rest of this might not help so much now, but good to keep in mind for the next project....
It's best to design your page structure based on the semantic meaning rather than the specific effect. Navigation, article, aside, sidebar; not left, right, bold, etc. Imagine you have a sidebar on the right. You could name it "sidebar" or "textright". But down the road you decide to put it on the left.... or do something completely different on mobile. Now "textright" is just mislabelled.
Even keeping with your current way of doing it, you should note that an element can have multiple classes. So rather than having:
<p class="body">...</p>
<p class="bodytextcenter">...</p>
<p class="bodytextright">...</p>
you could have something like:
<p class="body">...</p>
<p class="body textcenter">...</p>
<p class="body textright">...</p>
With that you can set fonts on p.body, and layout on p.textcenter and p.textright
That's an imperfect answer for the current project, as it would require changing a lot of existing text, but that goes back to the initial issue -- poorly structured CSS. (And again, without seeing HTML I'm mostly guessing here....)
I have a glyph font and want to use it to achieve this effect:
My code so far:
<div class="ico linkedin">linkedin</div>
.ico {border-radius:10em; background:black; color:white}
.linkedin {visibility:hidden;}
.linkedin:first-letter {
font-family:'JustVector';
font-size:900%;
text-indent:1em;
visibility:visible
}
This does the trick in Chrome, but not in Firefox or Internet Explorer 9. Also, this isn't accessible, because JAWS doesn't read the hidden or display:none elements.
So, I tried something like:
.linkedin {position:absolute; left:-5em}
.linkedin:first-letter {/*etc*/ position:absolute; left:6em}
But it doesn't work. Is there a proper and accessible way to achieve this?
The accessible way to use icons is to use img elements with adequate alt attributes, e.g.
<img src=smiley.gif alt="Just joking!">
Icon fonts (which is what you probably mean by “gliph font”) have inherent accessibility problems. Using e.g. letters and trying to fool browsers into rendering them as icons with CSS means that with CSS turned off, there are just the letters, which are wrong information. Using elements with empty content and CSS-generated content suffers from the same problem, except that instead of wrong information, there is no information, when CSS (or at least the visual part of CSS) is off.
I don't think there is a truly accessible way of using icon fonts currently. I know it's a bit span-tastic but this what my approach to this would be.
Firstly wrap the text in a span so we can hide it. And add another span for the icon
<div class="ico">
<span aria-hidden="true" class="linkedin"></span>
<span class="hide">linkedin</span>
</div>
Notice I've added aria-hidden="true" to my icon span. This is to prevent the letter (used to render the icon) from being read out by the screen reader.
Now you can safely hide the text so it is accessible by screen readers and apply your icon using the before selector.
.linkedin:before {
font-family: 'JustVector';
content: 'l';
}
.hide{
position: absolute;
top: -9999px;
left: -9999px;
}
Thanks for the answers, they present me a few questions about how to deal with this.
Well, finally I go with the easy one. I think it's accesible and more semantic, also works if there's no CSS in the page, also it's possible to be printed.
I have separated the first letter (the icon) with a margin of surrounding text, and I left the layer with overflow:hidden;. Then, have adjusted margin and line-height, to focus well the character/icon inside the circle.
The final code:
.ico {background:black; border-radius:10em; height:5em; overflow:hidden; position:relative; width:5em; color:white;}
.linkedin:first-letter {font-family:'JustVector'; font-size:400%; line-height: 1.3em; margin-left:0.2em; margin-right:1em;}
With that solution, screenreaders reads "linkedin" and it only display the icon for other users giving them enough information.
I found this reset.css file inside a jquery image slider demo, but it was never included in the main index.html file. what is is suppose to do, and more importantly, where do you put it? Do you put it before any referenced stylesheets()?
Here is the code inside reset.css
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
In the beginning, there was no standardisation on how styles worked, each browser implemented what it felt was right. One of the reasons you see so many questions about style errors in IE is because IE was the browser with the most dissimilarities from other browsers in terms of styling. Though IE has improved and so have other browsers they still apply their own borders, padding and margins, zoom, fonts to elements to give their own unique feel to pages. One example is, chrome gives its own yellow borders to text boxes. The "reset" actually "resets" all these styles to zero/none, so that you don't see any styles you haven't applied to your page.
If these styles are not "reset", you will see unwanted styles/effects and things breaking. Its generally recommended to "reset" the browser's styles.
Have a look at this article Should you Reset Your CSS?
reset.css is used to normalize browser's default styles.
Example:
Looking at the answers here there seems to be a bit of mixup between "reset" and "normalize". Their goals are slightly different.
A CSS reset is a set of styles you load prior to your other styles, to remove browser built-in styles. One of first and most popular ones was Eric Mayer's Reset CSS.
Another option is to harmonize browser built-in styles. The most popular tool to achieve this is currently Normalize.css.
Browser have different "built-in" styles which they apply to different html-elements. These styledefinitions may vary accross different browsers. The normalizing css files are meant to „normalize“ the rendering of the page across browsers by resetting these browser-specific styes.
You have to include it before your own style definitions. Otherwise these styles would possibly override (due to the cascading nature of css) your declarations too, which wouldn't make much sense;)
The most popular styles reset is probably Eric Meyer's which comes along with a little background information..
Browsers may render the HTML and CSS received according to its native rendering engine. Different browsers may use different rendering approaches [IE ;) if you know what i mean] so the intension of reset.css is to set all the attributes to common predefined values so the developers/ designers are can forget some rendering engine and start development from the scratch.
A CSS Reset (or “Reset CSS”) is a short, often compressed (minified)
set of CSS rules that resets the styling of all HTML elements to a
consistent baseline.
In case you didn’t know, every browser has its own default ‘user
agent’ stylesheet, that it uses to make unstyled websites appear more
legible. For example, most browsers by default make links blue and
visited links purple, give tables a certain amount of border and
padding, apply variable font-sizes to H1, H2, H3 etc. and a certain
amount of padding to almost everything. Ever wondered why Submit
buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors,
who can’t work out how to make their websites look the same in every
browser.
Using a CSS Reset, CSS authors can force every browser to have all its
styles reset to null, thus avoiding cross-browser differences as much
as possible
refer http://www.cssreset.com/what-is-a-css-reset/
Every browser has its own default user agent stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3, etc. and a certain amount of padding to almost everything.
Ever wondered why Submit buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser.
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.
From the consistent base that you’ve set up via your reset, you can then go on to re-style your document, safe in the knowledge that the browsers’ differences in their default rendering of HTML can’t touch you!
Hopefully it helped, you may want to take a look at this article, Which CSS Reset Should I Use?.
In simple words CSS reset is required due to browsers’ inconsistency. In detail all browsers rendering are not the same. Therefore web rendering could be different from browser to browser.
Meyer Web providing a utmost CSS reset code if you're want to use/reset. You can find it here. If you need more details, here also you can find out what CSS reset in more details and why we need to use it.
ok, I admit I'm in the realm of playing around now...
What I want to achieve:
there should be a plus sign before utility links that are used to add some elements in our web application.
It would be good if this sign scales according to the font size the user has set.
What I've tried:
<style type="text/css">
a.addLink:before {
content: url('images/add.png'); height: 1.2em;
}
</style>
<a class="addLink" href="#" onclick="freakyJSFunction">testlink</a>
sadly, the height attribute is ignored.
I know i could just insert a normal <img../> before every link, but that's not as maintainable as we want it to be.
Or I can use one of the fancy unicode characters, for example
content: "\271a"; font-size:1.4em; color:green;
for now, I'll go with the unicode idea (just tested this in IE8...nope, IE 8 doesn't display that character ("greek cross")...:-( )...ok, I will go with the unicode idea if I find a suitable charakter that is displayed in IE8, FF and maybe chrome..
still, I wonder if my initial idea is somehow doable
In css3 you have a background-size property.
http://jsfiddle.net/jQgQv/7/
However background-image can't be applied trough content: so it won't work in your case using :before - only as a normal class.
I'm used to use padding + background-image to place an icon next to a link.
There are many example of this approach. Here is one from here:
<a class="external" href="http://www.othersite.com/">link</a>
a.external {
padding-right: 15px;
background: transparent url(images/external-link-icon.gif) no-repeat top right;
}
But most browser don't print background image, which is annoying.
What is the standard to place icon next to links which is semantically correct and works in all cases?
EDIT
What about CSS :before and :after? Is it a recommended practice?
a.test:after {
padding-right: 5px;
content: url(../pix/logo_ppk.gif);
}
I'd personally pad it and put a background image via a CSS class (just like your example). It's by far the lightest route, it keeps the document light and semantic.
If printing them really matters (and I do mean really matters) stick a real image in there but be aware that it does screw up markup from a semantic aspect.
Perhaps a better compromise solution would be to have a "printable version" which uses images instead (either by something server-size or some JS that replaces the CSS class with an actual image.
Although as OLi saying keep icon in css is best method and there is no way to print css backgrounds. (until you turned on css background printing from browser settings).
but if you can use javascript then this method will work for you
http://www.learningjquery.com/2008/08/quick-tip-dynamically-add-an-icon-for-external-links
you can add inline image to link.