3 ms·

Why are lines 10+ not inside of a <style> tag? I wasn't aware you could put CSS into the document without being in a <style> tag. Also, why does the document n

Why are lines 10+ not inside of a <style> tag? I wasn't aware you could put CSS into the document without being in a <style> tag. Also, why does the document not have a <head> tag? And, why does it not have a <title> tag? It appears that many things that I thought were normal to put into an html page are not.

reaperducer 5y ago
It appears that many things that I thought were normal to put into an html page are not. Those are normal things, but some companies like to deviate, often just to be different. For example, Google uses a Unicode lightning bolt as its DOCTYPE for Amp pages. However, saving 100 bytes on a page load can end up being actual money saved when you shove out as many pages as Twitter does in a month.
- irrational 5y ago
  Saving bytes makes sense. But how does the rendering engine know that those lines are CSS instead of junk text? And without a head tag, how do those lines not end up as text in the body of the document? And isn't it strange that it doesn't have a title tag (though, if you aren't going to have a head section, maybe skipping the title tag makes sense too).
hombre_fatal 5y ago
It's cropped out in the screenshot, but if you look at Twitter html source, you'll see that there is a <style> tag that opens at the end of the line before the CSS. There is a <title> tag, but it's created by Javascript. You can see it with document.querySelector('title') once the page loads.
jlokier 5y ago
There is a <style> tag. It's at the end of very long line 9: ...haW4iOnRydWV9" /><style>html,body{height: 100%;}</style><style id="react-native-stylesheet">[stylesheet-group="0"]{} Several of the first 10 lines are extremely long and have a large number of elements per line. Because it's not meant to be human-readable, to save space, newlines are omitted where they are not required. <head> is optional in HTML5 syntax. It's implied by the first <meta> tag. There's still a <head> element, which you can see in the DOM inspector. <title> is optional. But in Twitter's case, the <title> element appears to be added later by JavaScript, as it's not in the page source but it is in the DOM after loading. Various people say <head> is omitted to save space because it's optional in the HTML5 syntax anyway, and that shaving off a few bytes is worth it. It is to save space, but it seems hardly worth it when you look at the full head section, which has a large number of <link> elements>, and the long content of the origin-trial <meta> elements. They suggest the page is not particularly optimised for size. To see Twitter's head section properly, it's best to view source, copy to a text editor, then insert a newline before each "<" where there isn't one already.

reaperducer 5y ago

It appears that many things that I thought were normal to put into an html page are not. Those are normal things, but some companies like to deviate, often just to be different. For example, Google uses a Unicode lightning bolt as its DOCTYPE for Amp pages. However, saving 100 bytes on a page load can end up being actual money saved when you shove out as many pages as Twitter does in a month.

irrational 5y ago
Saving bytes makes sense. But how does the rendering engine know that those lines are CSS instead of junk text? And without a head tag, how do those lines not end up as text in the body of the document? And isn't it strange that it doesn't have a title tag (though, if you aren't going to have a head section, maybe skipping the title tag makes sense too).

hombre_fatal 5y ago

It's cropped out in the screenshot, but if you look at Twitter html source, you'll see that there is a <style> tag that opens at the end of the line before the CSS. There is a <title> tag, but it's created by Javascript. You can see it with document.querySelector('title') once the page loads.

jlokier 5y ago

There is a <style> tag. It's at the end of very long line 9: ...haW4iOnRydWV9" /><style>html,body{height: 100%;}</style><style id="react-native-stylesheet">[stylesheet-group="0"]{} Several of the first 10 lines are extremely long and have a large number of elements per line. Because it's not meant to be human-readable, to save space, newlines are omitted where they are not required. <head> is optional in HTML5 syntax. It's implied by the first <meta> tag. There's still a <head> element, which you can see in the DOM inspector. <title> is optional. But in Twitter's case, the <title> element appears to be added later by JavaScript, as it's not in the page source but it is in the DOM after loading. Various people say <head> is omitted to save space because it's optional in the HTML5 syntax anyway, and that shaving off a few bytes is worth it. It is to save space, but it seems hardly worth it when you look at the full head section, which has a large number of <link> elements>, and the long content of the origin-trial <meta> elements. They suggest the page is not particularly optimised for size. To see Twitter's head section properly, it's best to view source, copy to a text editor, then insert a newline before each "<" where there isn't one already.