At first, I was going to try and figure out what in the hell was going on in terms of CSS styling on the Pitchfork homepage. But I came to the harsh realization that it would take the better part of the week for me to get any sort of grasp on what was going on.
Instead, I’ve decided to tackle the CSS styling on the Google News homepage. This is something I visit frequently, especially if time is not on my side and I need to quickly digest the day’s happenings.
The first line of code that caught my eye was for the scrollbar at the left of the page. When looking at the CSS for this scrollbar, I noticed there is a “pseudo-element” in followed by :: that was in front of things such as -webkit-file-upload-button element and -webkit-input-placeholder element. In looking at John’s blog post, he found the same element when looking at the MoreSleep site. From what he found, this element is used to style the first letter, or line, of an element and to insert content before, or after, the content of an element. But, I really have no idea the exact function of this element…
I do feel that I understand the “transition” element, though. The duration for the transitions on the scrollbar is .218s. I’m curious as to how one goes about assigning the appropriate duration. Hopefully that is something I pick up on.
One other thing I caught while looking at the scrollbar was the “overflow” element that allows one to denote what happens when content overflows an element’s box. The description used on Google News is for the overflow to be visible, meaning the content is rendered outside of the elements box. According to w3schools, this is the default.
Another element I picked up on that I was not previously familiar with was the “min-height” element. This allows one to set a minimum height for an element so that the value of the height property does not become smaller than the min-height set. There is also a transparent background for this element.
Stylistically, this site is extremely simple and is really nothing more than a running list of the day’s top stories with a scrollbar on the left with more top stories and shortcuts to see top stories by location and category.
Hopefully all this mumbo jumbo makes sense…