I know that in HTML4 classes and id cannot start with numbers.
I am coding in HTML 5/php and alot of my ids and classes have just numbers in them that point to a primary key in my database for jquery ajax calls.
I cannot find the documentation for HTML5 classes and id spec. Is it valid in HTML 5 to have class and id names such as,
class="122"
id="13213"
I have ran my output code through w3c conformance checker and all is good, but still I would like confirmation!?
Thanks
I’ve researched this thoroughly and wrote about my findings: The id attribute got more classy in HTML5. From that article:
HTML5 gets rid of the additional restrictions on the id attribute. The only requirements left — apart from being unique in the document — are that the value must contain at least one character (can’t be empty), and that it can’t contain any space characters.
To target a classname or ID that starts with a digit in CSS or in JavaScript using the Selectors API, you should escape them. For example, to target the element with id="404", you can’t just use #404 — you’d have to escape it as follows:
#\34 04 {
background: pink;
}
The official html5 specs are here: id-attribute in html5.
(Here you go for html4)
So in html5 the only restriction is minimum 1 char and no whitespaces.
Related
I have an old email template contributed to by several people and it uses an attibute selector to select the class attribute value in addition to the normal class selector.
*[class=hide], .hide {
display: none !important;
}
Every media query selector in the email is set up this way using square brackets in the first selector.
I'm trying to figure out if this usage can be removed in favor of only the regular dot syntax .className selectors.
Searching around, I can see that at least at some point, Yahoo Mail required this syntax within media queries.
Where is the attribute selector syntax for class names necessary in HTML emails in 2022?
It's not required. In fact, if you do it, there are risks depending on what is written that Gmail apps will delete your entire <style> block. You are right that it was an old Yahoo requirement (and that requirement has passed).
So definitely use normal classes, if you need embedded styles at all (you should rarely need them, since most of the styles need to be inline as many email environments don't support embedded styles - see https://www.caniemail.com/features/html-style/).
You might also like to lookup what other selectors are currently supported here: https://www.caniemail.com/search/?s=selector
Generally, we only need to use embedded styles for progressive enhancement.
Normally I can get around the fact xpages hijacks the id-attribute on fields etc by using the x$ jQuery selector...
However, I'm building a sylesheet using the #print media query to make a normal form into a pretty version when printed. I have a scenario, where I have a custom control, have given it an ID of GuidanceArea, and under normal circumstances would be able to reference it in my style sheet with #GuidanceArea, just to simply hide it for example for this scenario.
However this isn't working, I assume because of the ID hijacking? It's not too much of a big deal, as I have workaround where for all elements I don't want to print I just append no-print to the elements styleClass and have .no-print set to display:none in my #media print within the style sheet.
However out of curiosity more than anything, I wondered if there's an easy way to get a hold of an elements ID for use in CSS?
The short answer: don't
The longs answer: JSF and XPages manage the id attribute to ensure it is unique on a page. So you don't have actual knowledge what it will be.
The easiest way is to use the class attribute to mark the element of interest, so your selector would be .someclass instead of #someid
But if you absolutely have to: use an XPages output element to send a piece of computed inline css where you use expression language to obtain the actual id. Browsers or libraries might cough on the : in the id, so your result requires lots of testing. VanillaJS should work.
This question already has answers here:
What's the difference between an id and a class?
(17 answers)
Closed 7 years ago.
<div id="stockexchange-id" class="stockexchange-class">Text</div>
In the example above I added both a class and an id into the div statement. Is there a difference between them? If I call .stockexchange-class CSS instead of #stockexchange-id CSS does it make any difference? If it doesn't then what it the point of having both of them? Also which one would be better to use?
The biggest difference is that a document can have multiple elements with the same class, but not with the same ID. An Identifier must be specific to a certain element within a document (i.e. full HTML page).
When applying CSS styling, some experts have recommended using classes over IDs to avoid specificity wars. CSS Lint (http://csslint.net/) recommends this.
The reason is that stylesheets are read from top to bottom, but IDs take precedence over class. This means that:
#stockexchange-id {
color: blue;
}
.stockexchange-class {
color: red;
}
Would color the text blue, even though red comes later. Here's a good graphic explaining specificity: https://stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg.
If everything has the same specificity, and most styles are applied via a single class, it makes the CSS easier to reason about, since it will read from top to bottom without extra styles being mixed in different orders. It also makes it easier to override classes, which can be useful.
Finally, if you style based on classes, you can re-use the styling on the same page by applying the class to another element on the page. With IDs, since they are unique, you cannot do this. Even if you think an element is unique on a page (e.g. a Buy Button), this may not always be the case. A designer may request the same element again later in the page.
You can only use an ID name once in any XHTML or HTML document. Duplicate ID tags will cause your page to fail validation, and can have negative effects when using JavaScript with them. Simply put, an ID is like the sticker that says "you are here" on a mall directory, and there can only ever be one of those.
Classes, like ID's, can also be used to in JavaScript scripts, but unlike ID's, they can be used multiple times in the same HTML document. This separation of content from presentation is what makes sites powered by CSS more robust, but some don't know the full extent to which they can use classes.
I am reviewing an educational website and it does not pass HTML5 nor CSS w3.org acessibility tests. Is this the norm? Do any sites these days pass these tests?
Eg.
Bad value Format for attribute name on element meta: Keyword format is not registered.
& did not start a character reference. (& probably should have been escaped as &.)
Property border-radius doesn't exist in CSS level 2.1 but exists in [css3] : 10px
Unknown pseudo-element or pseudo-class :nth-child
I am reviewing an educational website and it does not pass HTML5 nor CSS w3.org acessibility tests. Is this the norm? Do any sites these days pass these tests?
The W3C validator was updated about two months ago to look at HTML5. There are some bugs, but I haven't been following the progress. The bugs are mainly around some ARIA-stuff. In general it is good to get the code as valid as possible. Note if the validator says it is 100% valid code, that doesn't mean the site is accessible, it isn't an accessibility tester. The same goes for the CSS test, it matches your CSS to the spec, and makes sure that youu have : and ; in the right places. It may some color contrast tests, but I am not 100% on that. If the validator does, it uses WCAG 2.0 to check the ratios.
Bad value Format for attribute name on element meta: Keyword format is not registered. & did not start a character reference. (& probably should have been escaped as &.)
This is an age old issue. Somewhere you have an &, maybe for a link, such as: mysite.com/var1=Ryan&var2=B. The validator thinks you are trying to say &var2 is a valid HTML entity and saying that your link should be coded as mysite.com/var1=Ryan&var2=B.
Property border-radius doesn't exist in CSS level 2.1 but exists in [css3] : 10px Unknown pseudo-element or pseudo-class :nth-child
Either the CSS Validator is still checking against the CSS 2.1 Spec or it is saying "Hey not all browers understand CSS3 yet, so you may want to change it."
I was recently updating a CMS site and a tab-navigation plugin had inserted the following markup:
<li id="News_tab">...
I've always written my CSS selectors in lowercase so when I tried to style this with #news_tab, it wouldn't apply, but #News_tab worked.
After all these years I'm surprised that I haven't run into this before, so I've always been under the impression that CSS was case-insensitive. Has CSS always been case-sensitive and I just haven't noticed thanks to my consistent code style?
CSS itself is case insensitive, but selectors from HTML (class and id) are case sensitive:
CSS recommendation on case sensitivity
HTML recommendation, id attribute (note the [CS])
CSS4 (CSS Selector Level 4) adds support for case-insensitive match (ASCII only).
input[value='search' i]
It's the "i" at the end which would do the trick...
Check my other answer for details which browser supports this.
Class and ID attributes are case sensitive.
http://www.w3.org/TR/CSS2/syndata.html
All CSS syntax is case-insensitive within the ASCII range (i.e., [a-z] and [A-Z] are equivalent), except for parts that are not under the control of CSS
From the docs website.
Follow-up for selectors:
http://www.w3.org/TR/CSS2/selector.html
The case-sensitivity of document language element names in selectors depends on the document language. For example, in HTML, element names are case-insensitive, but in XML they are case-sensitive.