I use CSS to count sections in an HTML document:
body {counter-reset: sect;}
section:before {
counter-increment: sect;
content: 'Section ' counter(sect, upper-alpha);
}
The result is:
Section A
Section B
How can I style the counter to output numbers written in English?
Section One
Section Two
I have a solution via jQuery (using an array of strings) but I am looking to only use CSS. Is there a way to do this without using JavaScript?
Not yet. There's a spec in the works that allows setting custom glyphs and repeaters but it's currently still in working draft status and I'm not aware of any browsers supporting it yet. I just tried Chrome latest beta and it certainly doesn't, and MDN doesn't even seem to be aware yet of its existence despite the current version being over 2 years old already.
Related
I'm trying to include a header text in all pages of the document while printing as well as faxing using CSS #page rule. But it's somehow not working for me when i see the preview in Chrome. I'm checking this in jsfiddle. Here's my link for the code i have been working on Code Link
I know that using #media print content can be added. But i want to do this using #page css.
If you add
.subpage: after {
content: "name";
}
The content is added. But if you do the same thing as
#page {
#top-right {
content: "name";
}
}
It does not work. Is there a way to make this work?
This is exactly the way it works and your example is correct. However, modern browsers do no support #page just yet. You have to use software like Prince XML, PDF Reactor of Antenna House Formatter.
You can download a evaluation version of PrinceXML
pwavg is correct. None of currently-used renderers support #top-right rule, which is the reason why it is not working for you. You can see it here on Wikipedia (search for #top-right).
I know Wikipedia is not the most reliable/updated source, but still better than nothing, I guess. And at least on this particular page it looks relatively actively updated.
As far as I can remember, the only rendering engine that ever supported it (except Prince) was old Opera Presto renderer, but that is not developed anymore.
I have a form marked up like: <form id="some-form">. I have always selected forms using
#some-form { /* declare my css */ }
However, one of my team members said this is not cross-browser or backwards compatible and said I needed to declare my css using syntax something like:
form [id="some=form"] { /* declare my css */ }
Can anyone elaborate on whether this is true? And which browsers / versions will be affected? And what the proper syntax to ensure cross-browser backwards-compatibility? Thanks!
What your team member is describing is the CSS attribute selector. If anything, his/her way of targeting the <form> element would be less backwards compatible as the ability to target elements based on attributes was added in CSS 2.1 while your way of doing it has been around since the beginning. Although less compatible, the market share of browsers that do not support CSS 2.1 is very minimal, and shrinking every day.
See here for more info: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
selecting elements by id using #someid has been supported since CSS1. So just about every browser that has CSS support should support it.
Sometimes when I see a website I like or sites from respected people, I see the source codes and try to understand them (as we all do).
On Jeremy Keiths site he uses the following code:
[role="navigation"] a {
font-weight: bold;
text-decoration: none; }
I have never seen this before, and a few other times I saw code (which can be considered a "trick") that I had never seen before.
Other than asking what the above code means, my question is - is there any documentation, book or blogs that go through to learn about the advanced/less known CSS "tricks"?
The above targets elements that have a role attribute, such as:
<div role="navigation">
...
</div>
A class would make sense here too, but it's just another way of doing it. Attribute selectors are a standard part of CSS2, but at the time IE6 didn't support them so it hasn't been used much until recently.
There are many other such selectors that have been around for a long time but couldn't be used due to limitations imposed by IE. See Quirksmode for more examples.
That is a CSS attribute selector. It's saying "All <a> tags that are descendents of an element that has an attribute of role with a value of navigation should be styled in the following way ..."
He's using it for accessibility principally, and for styling only secondarily.
If you are looking to learn some of the newest things about CSS, I'd recommend css3.info and css3please.com. The first is a great source of examples of new tricks, and the second one lets you play with the new stuff in the browser. Other than that ... I've found that the best way to learn is to answer questions here (looking things up when you are not sure) combined with reading -- Eric Myers, Paul Irish, Quirksmode -- all of these are good resources for learning things that are new to you.
In this example, the <nav> is wrapped in a <div> and then then assigned a navigation role. The same can be achieved with just
nav a {}
A lot of sites seem to mix a "little" HTML5 with XHTML. I really don't see a reason why they don't use HTML5 "completely". The whole point of HTML5 is to be more semantic and to write less code that's more meaningful.
Some useful links.
http://html5doctor.com/
http://htmldog.com/
http://desizntech.info/2009/03/discover-the-cool-of-css-25-advanced-css-techniques/
As of now, you'll need a bit of javascript to make HTML5 elements work in IE. These links should help
http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/
http://remysharp.com/2009/01/07/html5-enabling-script/
Role is a new XHTML2 attribute.
http://www.wait-till-i.com/2009/05/16/pitching-a-hack-or-a-product-dos-and-donts/
http://www.w3.org/TR/2008/WD-xhtml-role-20080407/
Cool, which browser did it work in?
http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#selectors
E[foo="bar"]
an E element whose "foo" attribute value is exactly equal to "bar"
Since this function is implemented in IE8, I wanted to see exactly what I could do with it, but I'm having trouble getting it to work anywhere other than the :before and :after css pseudo-elements. Should the following be allowed?
span[color] { color: attr(color); }
I tried it in Google Chrome too, but it didn't work. Also, what about more dynamic things like:
input[value=attr(default)] { color: gray; }
In CSS 2.1 (which is what should be used these days) the attr function is a little limited in what it can do. The only place where it can appear is in a content property on :before and :after pseudo-elements. So its sole purpose is generated content.
In CSS 3 this changed a bit, in that attr() may return other types than only strings and it can be used for other properties as well.
But bear in mind that most of CSS 3 is still a Working Draft with very few features (not including Values and Units) being a Candidate Recommendation. Support by User Agents for CSS 3 features varies currently between limited and next to non-existent. Mostly browser vendors seem to fight boredom by implementing "cool stuff" like rounded borders, text shadow, etc. which doesn't mean much work supporting it. But what you were looking at here is definitely beyond that and the WD status won't change in the near future. So don't expect it to be implemented anywhere.
Just use
span.red {}
for any different color, i don't think you need all combinations :)
Or just use
span[color="red"] {}
Here's the situation: I'm trying my hand at some MySpace page customisations. If you've ever tried [stackoverflow], I'm sure you understand how frustrating it can be.
Basically it can be all customised via CSS, within a certain set of rules (e.g. the '#' character is not allowed...how useful!).
Have a look at this blog if you want more info, I used it as the basis for my customisations
So the only problem is with the comments section, where 'friends' post whatever they feel like.
It already has...
max-width:423px;
...set on the table, but I've discovered if long URLs are posted in the comment section, it blows out the table width, regardless of the max setting!
Question: Is there a way to manage text that is going to push the width of the table?
Perhaps splitting/chopping the string? Or is there more I should be doing..?
The URLs are posted as text, not hrefs.
Using Firefox and Firebug btw.
Edit: Also javascript is not allowed ;)
Another edit Just checked with IE7, and it seems to work.. so firefox is being the hassle in this case..
Have you tried the various values for the "overflow" css property? I think that may do what you need in some permutation.
a few browsers support word-wrap
ex.
<div style="width: 50px; word-wrap: break-word">insertsuperlongwordhereplease</div>
browser support currently is IE / Safari / Firefox 3.1 (Alpha)
Your options are pretty limited, if you are using only CSS. You can try
overflow: hidden
to hide the offending parts. CSS 3 supports text-wrap, but support for it is probably non-existent. IIRC there is an IE-only css-property for doing the same thing, but I can't remember it at the moment and my Google-Fu fails me.