Interesting CSS stuff, part 1

[Bloc]

During these easter days, quite relaxed I might add , I came across 2 interesting articles that will will very helpful in theme making, at least for me, as it adresses 2 age-old problems with CSS only solutions.

http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio shows how to maintain the aspect ratio of an element, you know, if you use background-images instead of img tag - very useful when wanting different versions of a picture in different resolutions - you always have to put an aprox.height only. It will eventually be wrong. But with this technique I got my images correct every time.

The other at http://alistapart.com/article/quantity-queries-for-css shows how to limit items when they are too many - for example the infamous SMF menu having 15 items but the theme only assume 10 would fit in its layout. Well, with this technique there you can hide, or better, change the layout/css according to how many items there are. Quite a great feature not having to do that in PHP(which is also possible of course, though not as elegant lol)

Continued Happy Easter 

[Hj Ahmad Rasyid Hj Ismail]

Yes. Interesting indeed Bloc.

[Antes]

They are looking interesting indeed (not actually read them all but), I'll mark this topic for further discussion

[Bloc]

Well worth exploring/reading, Antes.

To elaborate further on the quantity-queries..in all present SMF versions there are button arrays that might be added to, by the theme itself or by hooks, so the number of buttons can be very high. And on the other end: for guests it might be just a single one. The CSS using nth-of will set a limit to when you can roll up the extra buttons into a hidden dropdown - or split it down to a new line. That will be better in the long run, the CSS already takes  care of more-than-5 items, any custom theme need not to worry about it. Unless they change or don't include that particular CSS of course.

I want to use it for shrinking the amount of menu/button items the lower the resolution(or higher the dpi) gets, to adress mobile devices. Since the buttons needs to be larger relatively, its important to reduce the amount shown at any given time. I can do it by PHP too, using a different CSS style, but it makes sense to let CSS deal with all of it, since its really a presentation-problem and not a content-problem.

It also will be easier to target mobiles that need that new style on just 4 items+, while laptops could master up to 7 perhaps. And then also be given a different style than what the mobile gets. All within same stylesheet, not cluttering up the template with logic to determinate this there.(and you can't use media queries in PHP anyway ). Now all I need to do is to make this work lol.

[Arantor]

Until you get the button lists whose list of buttons can change dynamically at run-time from JavaScript, for example having quick moderation as checkboxes and ticking individual messages in a thread to delete, whereupon the 'Delete Selected [1]' button appears at the bottom in the moderation button list.

[Bloc]

Hm, it seems like it, yes. The solution there could be to apply a new/similar style/class that will trigger the nth calculation again...but the responsibility is then on the js to initiate the change, not the theme/CSS itself...which will never work, since the theme's implementation can be quite different while the js would likely be provided by Source files.

I guess this is a situation where you have make a choice about using JS to add buttons, or use CSS to hide them first. The button's functionality should be the same whether its already present/hidden or added to at run-time. In both cases its a presentational problem(show when checkboxes are present ticked, hide when not) and CSS should be preferred IMO.