37

Is it okay to do this?

<link rel="stylesheet" href="css/mobile/load.css" id="stylesheet_mobile" />

so I can use JavaScript to dynamically disable stylesheets?

ajax333221
  • 11,436
  • 16
  • 61
  • 95
AlexCheuk
  • 5,595
  • 6
  • 30
  • 35

4 Answers4

40

According to HTML 4.01 Transitional, id, class are document-wide selectors, and thus it is ok to have them in the link element.

Ayush
  • 41,754
  • 51
  • 164
  • 239
  • Just FYI The ID attribute is not valid in **base**, **head**, **html**, **meta**, **param**, **script**, **style**, and **title** tags: http://www.w3schools.com/tags/att_standard_id.asp Though w3schools isnt a good source but w3 documentation doesnt say you can use id in these tags: http://www.w3.org/TR/html401/struct/global.html#h-7.4 – Vlad Minaev Apr 09 '12 at 18:15
  • 2
    One more reason not to use w3schools...The spec clearly states that id and class can be used on link elements: https://www.w3.org/TR/html401/struct/links.html#edef-LINK – danwellman May 16 '17 at 07:53
  • 1
    The people at **w3schools are experts...** at SEO. Their fraudulent website (it's not associated with W3C) has successfully polluted Google search so that their crappy ad-pushing pages often completely take over the first half page of Google results. – Dem Pilafian Oct 28 '18 at 20:45
8

Yes, you can. The core attributes are allowed on the <link> element, which includes style, class, id, and title. Although, since it's not a rendered element, classes and styles won't have any effect.

<!ENTITY % coreattrs
 "id          ID             #IMPLIED  -- document-wide unique id --
  class       CDATA          #IMPLIED  -- space-separated list of classes --
  style       %StyleSheet;   #IMPLIED  -- associated style info --
  title       %Text;         #IMPLIED  -- advisory title --"
  >
animuson
  • 53,861
  • 28
  • 137
  • 147
  • 5
    Classes have no effect? They do have purpose beyond the application of CSS. – Quentin Apr 09 '12 at 18:03
  • @Quentin I'm fairly sure animuson means they do not have any *built in* effect. Of course, any attribute of a tag could be used in Javascript... but so could the placement of the tag in relation to other tags. The element in question does not experience any built in effect from a class or ID being defined. – Andrew Barber Apr 09 '12 at 18:06
  • @AndrewBarber — That isn't unique to non-rendered elements though. – Quentin Apr 09 '12 at 18:14
  • @Quentin It actually sort of is, but I'll admit it's a semantic difference. I consider the effect of CSS to be "built in", and I think that is the general way animuson is thinking of it, here. Using classes to apply CSS styles is sort of the 'default' way you would use classes. I understand what you mean, but animuson did say "Classes *and styles* won't have any effect". He did not simply say "Classes won't have any effect" – Andrew Barber Apr 09 '12 at 18:24
  • 1
    @AndrewBarber - Here's a contrived, though valid, example of a class on link having a CSS stying effect: http://www.alohci.net/static/classonlink.htm . "View source" to see the source, obviously. – Alohci Apr 09 '12 at 18:38
  • @Alohci I don't want to get into a semantic discussion, so I'll simply say... *interesting*... – Andrew Barber Apr 09 '12 at 18:42
2

Yes. There are certain attributes that may be specified on every html element. id and class are among them.

For a complete list in the html5 spec: http://developers.whatwg.org/elements.html#global-attributes

The spec for the link element: http://developers.whatwg.org/semantics.html#the-link-element

And in html4.1: http://www.w3.org/TR/html401/struct/links.html#h-12.3

Zirak
  • 38,920
  • 13
  • 81
  • 92
1

Yup, it is. It is not recommended though, as this'd mean loading several files (multiple HTTP requests) as opposed to loading one bigger file (but one HTTP request only).

Florian Margaine
  • 58,730
  • 15
  • 91
  • 116
  • 2
    If he needs styles loaded conditionally, it's better to split them between files oftentimes. – Andrew Barber Apr 09 '12 at 18:03
  • What do you mean conditionally? Do you have any real example? Don't tell me IE stylesheets :) – Florian Margaine Apr 09 '12 at 18:04
  • 2
    Style-switcher is one use case for splitting files; allow the user to specify a "theme" – Zirak Apr 09 '12 at 18:08
  • Conditionally; for example, IE Stylesheets :P Or, user preferences. Or, seasonal styles. Or alternate page designs for certain sections of the site. Or... – Andrew Barber Apr 09 '12 at 18:08
  • Which is what I thought about. But having a bigger file and doing less HTTP requests is more performant. If the theme change happens later, that will do one less request too. – Florian Margaine Apr 09 '12 at 18:09
  • @FlorianMargaine I will agree with you *if* the conditional is session-constant. That is: if the choice of styles is persistent across the whole user session, it is better to have a single stylesheet that is larger and includes 'common' parts. However, if any styles will change dynamically during the user's session, it is more performant to split the common sections of styles into a single file, and have the changing parts in separate files. – Andrew Barber Apr 09 '12 at 18:11
  • Oh right, didn't think about this "common in one file and rest in separate files" approach :) – Florian Margaine Apr 09 '12 at 18:12
  • This is also not true when using HTTP/2 – Luca Steeb Jun 21 '16 at 19:24
  • @LucaSteeb at the time this answer was written, HTTP/2 wasn't even a proposed standard. – Florian Margaine Jun 21 '16 at 20:27