CSS unlimited

prepared for cut and splice across browser-land.

For every single page that grows up in my editor(s), a number of CSS combi­na­tions are tested to see what will carry the specific article best. Most are built with, and on top of, pre-arranged markup and CSS created a decade or more ago. With bits and pieces of newer code that is found to work acceptable in latest browser versions, added in where I find sensible uses for them.

Browsers offer better support these days, but other­wise not much has changed in 20+ years.
I may be old-fashioned, but who cares as long as every­thing works as intended.

The more flexible the design techniques, the better chance I'll find combi­na­tions that will work across the entire range of apps and devices my pages may end up on. So, while the “norm” is to rely almost entirely on complete styling for elements that are repeated, I prefer to style elements “less complete” and have ranges of “modifiers” at hand.

Whitespace do for instance play an essen­tial role in web design, and much of the seemingly super­flu­ous modifier-styling is for pulling and pushing elements horizon­tally and verti­cally, to make them line up in certain ways relative to each other. All very simple, but some­what similar effects can be achieved in different ways with slightly different outcomes and effects on their neighbors, which means there are many lines of code only for varying margins, paddings, relative offsets, width and height, in the main style­sheets.

That the entire CSS combo must work well in condi­tional elastic layouts, means I have used lots of what looks like “dupli­cates” of the same “modifier” classes, with different values that kick in at certain window/​screen widths, along with changes in font-sizes, line-heights, and so on. The short class names I use, for the most part only hints at what they do – not much “semantics” in my selector naming conventions.
All in all a rather complex and sort of messy CSS, intended to make all visual align­ments look simple and “just right” across the widest possible range of screens.

My main work is of course centered around arranging content for easy access, and being easy on the eyes to anyone who happens to pass by. The old “content is king” mantra still goes.

splicing it together

A short line of gibberish in the form of classes
<p class="ha-6 pob5"><span class="ha-6b tlc tac cf1 cfs2 tsy20 bup6 sh"> … </span> … </p>
… ended up as the “overshooting container inside another container”, presented in the section above. Priori­tizing flexi­bi­lity over clarity at the code-level one might say, and with styling to go with the medium, and added content, it displays exactly as intended.

Styling for several media, screen-sizes and paper-width in turn, can sometimes be a little tricky and require added classes. I prefer that slight over­styling tech­nique over going for some form of “one size fits all” styling, as, to be honest: one size rarely ever fits much of any­thing all that well in web design, unless the layout is kept extremely simple.

Some seriously overdone CSS selector chains here and there for improved control and ease of manip­u­lating the content carrying HTML, and otherwise written as compact as possible without making it totally unread­able for myself. I won't receive any prices for well-formed and easy-to-read style­sheets, but luckily browsers don't mind as long as the code is machine-read­able and correct.

variations over basic designs

Everyone who has been in the trade for a while has developed a set of individual and somewhat unique working methods. A couple of decades have shaped mine, and although I am unable to describe them in much details, they work.

Instead of restyling the site every few months or couple of years and follow trends, I draw on a huge collection of CSS styles to create varia­tions as new pages are added on site, and may also update design details on older pages along with current content. As the basic layout stays the same across the site in reflec­tion of my personal taste, more frequent visitors should not become confused.

I do from time to time receive email-comments from people in the business who can do it all so much better, at a price of course. I won't argue, but I have yet to be pre­sen­ted with design examples or methods that suit me better than what I have.

I don't know the actual number of usable CSS combi­na­tions those rather large main style­sheets behind this site contain, and as I add and modify details whenever I feel the need, I'll probably never find out. Number of available combi­na­tions is in the thousands, and that will have to do on a live test-/​play-/​info-site like mine.
I import or link to extra style­sheets as/​when needed. A simplified browser targeting stylesheet is for instance linked in to this page, just for the fun of it.

The total load of regular and irregular style­sheets has been signi­fi­cantly reduced over the years, as old and obsolete browsers in need of separate style­sheets for work­arounds have dropped to insig­ni­fi­cant levels.
Not many Internet Explorer versions left in the wild by now, and Mozilla and Chromium based browsers – covering nearly the entire web browser land­scape – don't need any extras in order to behave acceptable and render web pages more or less identical, as long as they get their regular updates.
What the few other rendering engines one may be able to list up as we write the year 2021 are doing, is not some­thing I pay much atten­tion to these days. They are either up to the task, or they fail.

bling be gone…

Mastering most tricks of the trade, does not mean one has to show off with all that many “smart design” solu­tions at every oppor­tu­nity. KISS variants of visual designs tend to cover most ground and work for most visitors, and also last the longest on a web of ever­changing trends.

Most browsers released today include built-in or added options for pre­sent­ing pages in their plainest and most primi­tive form – more or less as simple html for­mat­ted docu­ments strip­ped of actual design and what is deemed “irrelevant content”, which means I won't have to go very far down the “undesigned” or “vanilla” routes when designing mine.
What end-users with these “CSS strippers” at hand choose to do with my care­fully crafted web designs, is entirely outside my sphere of control, and interest.

That I personally tend to ignore most disturbing factors on web sites I visit, have of course had an effect on my own design work in that I am hesitant to include stuff that is not part of or in direct support of the actual content. I could of course have made mine a lot plainer than what they are, but what the heck; I like visual divisions.

CSS only

Back in 2013 I decided to test out CSS only for func­tion­ality. This site itself did not need much – only the Addendum open/close func­tion on wider screens relied on JavaScript (some older pages still do), and I could have left it at that. However, as the HTML/​CSS solu­tion was so simple and reliable, taking it into non-essen­tial areas followed naturally.

Usefulness of “functional CSS” may be ques­tion­able – as with all things and tech­niques in web design, but it is best not to ask any ques­tions beyond what user-agents will do when fed the content carrying code. So far so good, and knowing that all is working as intended is all that matters to me.

sincerely  georg; sign

Hageland 24.jul.2021
last rev: 26.jul.2021

www.gunlaug.comadvice upgradeadvice upgrade navigation