03.25
I swear if I had a penny for every time I saw a css file contain something like the following I would have a lot of pennies:
body {
background-image: url(/image/background.jpg);
}
I mean seriously, I swear the majority of the time the only thing in most peoples CSS folder is ‘styles.css’. Why even bother?
The point of CSS is to seperate style from structure. An accreditation logo, a staff photo, a company logo are content. The 8 separate images that make up the corners of a styled box are not.
If your imagery is content, use the <img> tag and put it in /images/ – that’s what it is for. If you want to style a box border, background or anything else that is non-essential content place it in /css/ along with styles.css and do the following:
body {
background-image: url(background.jpg);
}
It’s out of the way of the actual content images and if you want to change the design at a later point you just switch the content of /css/. If you want to be fancy it’s trivial to do /css/day/ and /css/night/ and have seperate stylesheets for night/day. If you decided to store everything in ../images/ then doing any of the above would be a real hassle.
*End PSA*
CSS for separate style not for separate content. Use CSS for embed images because not content. Images all style because not actual content of page only there for look pretty.
I only have one stylesheet, but that’s because I minify the 15 or so sheets I use to reduce the number of requests.
Also, I differentiate “images” from “static content”. All my images lie in a /static/ folder, separate from the /images/ folder where content can be uploaded.
CSS for separate style not for separate content. Use CSS for embed images because not content. Images all style because not actual content of page only there for look pretty.
Oiaohm, you don’t know anything. Images are content, so are headings, so is tabular data (tables). Background images may not be content, but actual tag images ARE content.
Headings not content are markup used for format and organize. Tabular and image not content because are arrange of content but not content itself. Used for make page look good but not for content. Google when search your page not worry about headers and tables and images only text content.
Oiaohm, please READ WHAT YOU WRITE BEFORE HITTING POST!
And you’re wrong since without proper document structure, content becomes unreadable or meaning is lost. For example:
One
Too many people have…
versus:
One Too many people have…
Without the structure, knowing that “One” is a heading, the meaning of the paragraph below changes.
Next, images ARE content. Ever heard the old saying “a picture is worth a thousand words”? Well it is! Diagrams, graphs, charts, schematics, blueprints, etc. All these things are content in the form of images.
Lastly, too bad you used Google as an example since Google Image Search is pretty damn popular and has options to “find related images” using colour, image structure and usage context. Hell, iPhoto can do facial recognition and identify your friends in your photo collections.
Yes but for image not able to do search using arbitrary literal. Require text search or derivation of preexisting content. So image not content in same as text and should be in css.
No, if I have an figure or diagram it should be an actual image since it provides flow to the document rendering!
Also, you do realize not all searching is done via text right? There are image based searches that will find objects based on crude user drawings.
For example, Retrievr. Draw a crude tree and it finds you trees. This is already being implemented in online product catalogues since it is often easier to describe something visually than to figure out the correct keywords to search for it textually.
Once again, Oiaohm tries to backpedal by trying to sound “official”.
I’d say Oiaohm’s logic is just as good as his grammar is!
Nope, you’re all wrong. Oiaohm is a transparent attempt to win the Turing test.
The program has a good way to go, and I suppose it doesn’t help that the chosen subject matter is Linux (rather than, say, home baking), but still.
I hear it’s well ahead of the local competition — “Head-hunting in Irian Jaya for fun and profit!”
No. Not content just be cause you say. Decided by page authors who know more about specific domain for page. In some case speed up compiling of page to place all image in css.
Bizzarely my version of GCC doesn’t seem to take HTML as an input. What am I doing wrong Oiaohm?
@Thomas B,
What the hell are you rambling about here:
“It’s like a code. You can keep adding new, cool things to it. But when you start to add things to old parts of the code, it gets bloated.”
What is “a code”? A LongPHPCode(TM)?
In some case speed up compiling of page to place all image in css.
What? You idiot, the images don’t reside INSIDE the CSS! There is no speed up for displaying images using CSS! It’s the same number of requests no matter where the image resides.
Not to mention all the additional markup and style in order to reproduce the effects of an image tag! Even worse, if the stylesheets are turned off, all those images disappear, a huge problem on mobile browsers!
Face it, you don’t know anything about web development.
If style sheet is turned of is because of lack of bandwith. Place image in css in this case will load page faster. Also result in faster parsing of images because css require smaller parse tree for contain image tag.
I thought this was a Loonix hater blog. Please delete this pointless pussy shit blog post, thanks.
Ahh the many faces of Adam King strike again. I’d see a psychologist if I was you, that multiple personality disorder is really an issue.
Well, I’m no expert on CSS, oiaohm, but surely if you turn the style sheet off (using MagicPixieDust(tM)), an image embedded in CSS won’t actually load *at all*. But I suppose that *is* faster.
Your assertion that the parse tree is smaller is dubious at best, and pointless in any case. I’m prepared to guess that the time spent by a browser in rendering an image outweighs the time spent traversing the parse tree by a factor of at least three magnitudes.
Look, feel free to brew up some hideous concoction of your own, but don’t assume it makes any kind of sense to anybody else. I advise going for completely static pages with absolutely everything embedded in them directly. That seems to fit your functional requirements.
What’s the point of using CSS if you don’t use it properly? It’s a design tool. It isn’t a bandwidth-reduction tool (although I would have thought it works that way as well, so long as you don’t have masses of CSS definitions that your page doesn’t need).
As any fule no, the first rule of computing is to *get the design right*. Then *profile*. Only then do you start doing weird-ass things that nobody will understand in order to shave off those vital milliseconds when downloading through your 19.2K modem.
@Kerberos
You probably mean a psychiatrist, although Adam has by now reached the rarified levels of insanity whereby a research psychologist might find useful employment.
As far as I can see, he’s the first person in history to acquire a multiple personality disorder without actually having a personality in the first place.
Yes design for CSS is for abstract content from style. Designed for faster parse because of image size. Not always have fast connections for internet. Often needed to function over slowly phone connection.
I suspect Oiaohm is a copy of Windows ME that had one too many memory corruptions and became sentient. It would explain a lot.
*best Oiaohm impression*
Yes think so too. Could possibly be case. Not easy to understand. Often confuses us.
If style sheet is turned of is because of lack of bandwith. Place image in css in this case will load page faster. Also result in faster parsing of images because css require smaller parse tree for contain image tag.
Wrong again! Stylesheets arn’t always loaded because they’re not always SUPPORTED by simple mobile browsers. Those browsing still want to see the logo, or a graph or a profile picture. That is important CONTENT that they need.
Likewise, a smaller parse tree isn’t the problem with CSS! It’s applying those styles during the document flow phase! Parsing a single image tag is way less overhead than parsing an entire stylesheet and then apply the styles at flow time.
I’m still not sure if you’re suggesting that things like profile pictures and graphs should be loaded as background images inside an empty DIV tag.
Yes design for CSS is for abstract content from style. Designed for faster parse because of image size. Not always have fast connections for internet. Often needed to function over slowly phone connection.
It was NOT designed for faster parsing or slow connections. In many cases the extra requests to get the stylesheets is a bigger hit. Likewise, embedded styles have to be parsed from the DOM.
CSS was invented to centralize and document styling so you didn’t need to use markup to style a large set of documents. It follows the DRY principle, Don’t Repeat yourself. If a style needed to be changed, it could be made across all documents by simply updating one file.
You know nothing about web development, that’s for sure.
That DRY principle sure can’t be said for regular HTML. Let’s say you have a navigation bar on your website. When you want to add a link to that navigation bar, you need to add it on every page that has the nav bar, if you want to stay consistent. Thank god for PHP includes.
BTW I closed my blog.
Er, Thomas…
That’s sort of why we use frameworks and MVC and stuff — a basic example of which is your PHP includes. Your “point” about the lack of DRY in “regular HTML” is a little silly: HTML is just a mark-up language, after all. It’s like complaining that I’ve been forced to re-use the letter ‘a’ all over the place in this post.
Anyway, if you’re interested in pursuing the topic, I’d recommend Terrence Parr’s thoughts at http://www.cs.usfca.edu/~parrt/papers/mvc.templates.pdf.
Thank god for PHP includes.
Thomas, there were these things developed long before PHP called Server Side Includes (SSI) that did the same thing.
http://en.wikipedia.org/wiki/Server_Side_Includes
Not understand purposes behind CSS. Yes centralize style but have more important to easy parse of style like images depend on connecting speed. If put images in CSS then mobile browser not spend forever downloading logo when could be downloading page.
You’re an idiot. Putting the logo in the page requires MORE bandwidth since setting up the styles to simulate an image tag is far greater than just using an image tag. Logos are important images, so are charts and graphs, so are profile photos.
If you don’t have those images in your actual HTML markup, then accessibility goes out the window. You don’t seem to grasp the concept of accessibility and using the correct markup for the correct situation. YOU NEED PROPER MARKUP! CSS IS NOT A SUBSTITUTE FOR IMAGE TAGS!
Image just as accessible by use style sheet. Just need to read css reference from page and read image reference from css.
You’ve never built a website in your life. Mind explaining how you display profile pictures on facebook if every single picture is different? Uh oh, suddenly the styles have to be embedded in the HTML. Or you’re creating dynamic stylesheets that can never be cached in the browser.
Way to go Oiaohm, you’ve invented the more inefficient and pointlessly difficult way of displaying images that no accessibility system can understand.
I think Ohioham might be talking about “spriting”.
it’s a technique which involves having all of (if not just many of) your image resources in a single fine and using clipping in CSS to display them. It’s supposed to speed up page loads (and technically save some marginal amount of bandwidth) by cutting down the number of requests, since because all of the images are embedded within a single file, only one request is made (plus the html page and stylesheet) as opposed to n requests, one for each image resource.
It’s stupidly convoluted, and requires a lot of extra work as well as drastically changing your approach to page design; all of your graphical resources are to be placed as DIVs with background attributes, and the css involved stands to drastically increase development time, especially on more complex, more graphics intensive layouts, and there are the aformentioned usability problems which arise. And the matter than stuff like logos, chars and pictorial images don’t belong in CSS to begin with, and as such should not be sprited.
Layout and stylistic elements belong in CSS, those are what you sprite up.
If he’s talking about spriting, he’s right. Spriting was conceived as a means to speed up page loads (but not necessarily to conserve bandwidth, a few dozen small images can easily take up less space and thus use up less bandwidth individually than they would if they were combined into a single large image) Though to suggest that CSS itself was conceived expressly for the sake of spriting is completely stupid, not to mention that he’s shot himself into the foot so many times already, it doesn’t matter.
Only text is considered content? What is this, the ’90s?
Yeah, I mentioned spriting way back when, that’s not what he’s talking about. Spriting works for non-essential images like icons, borders, button states, etc. However, for images like the company logo, profile pictures on facebook, etc. Those must be embedded with img tags otherwise they disappear if the stylesheets aren’t loaded.
His idea is to have all images loaded from the CSS so that if stylesheets don’t load, the page loads more quickly. Totally ignoring the fact that all browsers, especially mobile ones, have a “don’t load images” option right next to their “don’t load CSS” option.
You still trying to argue with Oiaoioiohm?
My god, you have infinite patience.
Not only did this post have nothing to do with Linux, but it didn’t even convey the message clearly. Only after reading some comments did I understand WHAT THE FUCK you were getting at. Your example is about the path of a file? Really? How about you describe the way browsers interpret markup/content. Or maybe just don’t waste our time any more with stupid posts like these.
Your blog went the way of LinuxHater’s. Dried up with nothing left to say that hasn’t been said already.