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 combinations 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 otherwise
not much has changed in 20+ years.
I may be old-fashioned, but who cares as long as everything works as intended.
The more flexible the design techniques, the better chance I'll find combinations 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 essential role in web design, and much of the seemingly superfluous modifier-styling
is for pulling and pushing elements horizontally and vertically, to make them line up in certain ways relative to each other.
All very simple, but somewhat
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
margin
s, padding
s, relative
offsets, width
and height
, in the main stylesheets.
That the entire CSS
combo must work well in conditional
elastic layouts, means I have used lots of what looks like “duplicates” of the same “modifier” class
es, with different values that kick in at certain window/screen widths, along with changes in
font-size
s, line-height
s, 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 alignments 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 class
es…
<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. Prioritizing
flexibility 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 overstyling technique over going for some form of “one size fits all” styling, as, to be honest: one size rarely ever fits much of anything 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
manipulating the content carrying HTML
, and otherwise written as compact as possible without
making it totally unreadable for myself. I won't receive any prices for well-formed and easy-to-read stylesheets, but
luckily browsers don't mind as long as the code is machine-readable 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 variations 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 reflection 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 presented with design examples or methods that suit me better than what I have.
I don't know the actual number of usable CSS combinations those rather large main stylesheets
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 combinations 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 stylesheets 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 stylesheets has been significantly reduced over the years, as old and obsolete browsers in need of separate stylesheets for workarounds have dropped to
insignificant levels.
Not many Internet Explorer versions left in the wild by now, and Mozilla and Chromium based browsers – covering nearly the entire web
browser landscape – 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 something I pay much
attention 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” solutions at every opportunity. KISS variants of visual designs tend to cover most ground and work for most visitors, and also last the longest on a web of everchanging trends.
Most browsers released today include built-in or added options for presenting pages in their plainest and most primitive
form – more or less as simple
html
formatted documents stripped 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
carefully 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 functionality.
This site itself did not need much – only the Addendum open/close function on wider screens relied on JavaScript
(some older pages still do), and I could have left it at that. However, as the HTML
/CSS
solution was so simple and reliable, taking it into non-essential areas followed naturally.
Usefulness of “functional CSS
” may be questionable – as with all things
and techniques in web design, but it is best not to ask any questions 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
Hageland 24.jul.2021
last rev: 26.jul.2021