August 13th, 2013, 10:36 PM
Time to ditch CSS? What are the problems with this alternative?
here are a few examples (tested in the latest version of all the major browsers):
In the first example, press the button to inflate the layout. Resize the window to see the responsiveness of the system. The second example demonstrates top-down stacking with height of the stack being minimized, and the yellow boxes fill available height in the stack.
The way I see it, internet/computer speeds are fast enough these days that if you can specify a layout system that works exactly how you want it to, and will render the same way across all platforms, in under 50kb, why not? Why remain a slave to the major browsers ability to implement a system that was poorly designed in the first place?
The most powerful part of this system is that anytime I want a new feature, I can simply implement it myself: I don't need to wait for the next CSS spec. And so far, in addition to designing my spec in a way that actually makes sense, I've added some very useful features not found reliably in CSS, such as:
- The ability to easily align any element (including text) inside any other element, top/center/bottom, left/center/right.
- The ability to float elements inside a parent from the left, right, top, or bottom. Furthermore the ability to stack the elements into the smallest possible space
- The ability to set an element to fill remaining space in the parent, or split the space evenly with other filling elements.
- When setting widths/heights in percentages, the ability to specify percent of width, height, or of the smallest dimension (%w, %h, %s), allowing easy creation of square elements.
- The ability to easily set elements to be spaced apart evenly.
EDIT: One other feature is the ability to expand or shrink a container by certain number of pixels, which is useful for relatively sized elements. So you could for example create a container that is 100% of the parent size, but specify a shrink of 50px for any or all edges.
So what are your thoughts on this method. What are the possible pitfalls? Documentation for all of the features, as well as the source code is on github .
August 14th, 2013, 12:18 AM
August 14th, 2013, 01:38 AM
Hi, Kravvitz. Thanks for your feedback.
As for the CSS preprocessors and the percentage padding technique: yes, they work to solve certain problems with CSS. But like I said, almost anything you try and accomplish using CSS requires some sort of workaround. These types of solutions are the wrong approach in my view, because they are built on a system that is faulty in the first place. It is much more attractive to me to start with a rock-solid foundation--a layout engine that makes absolute, logical sense--than to keep finding these types of workarounds (however clever they may be) to try and trick CSS into behaving the way we all expect it to.
August 14th, 2013, 07:26 PM
Have you tried building the complex home page from one of the more popular sites on the web, e.g. Amazon.com? Have you tried testing with it deployed on a server geographically remote from you?
I figured you'd notice that which is why I didn't mention it. Yes, IE9 and older do not support it and some older versions of Firefox implemented an older version of that specification.
Standards take time to write and test before they are finalized. Browsers are getting faster at implementing things. Even Microsoft has been developing IE steadily for a while now after they stopped for many years once they had released IE6.
My hypothesis for the reason for that is that heights are so often left as auto (which is a good thing) that it would be a problem if the vertical margins and padding (with percentage values) could not be calculated until the height of the element was known, which is especially a problem when all of its content has not finished loading.
August 16th, 2013, 08:18 AM
Re: Time to ditch CSS?
The complex home page form one of the more popular sites on the web e.g. amazon.com have you tried building . Have you tried testing with it deployed on a server geographically remote form you?
August 16th, 2013, 08:52 AM
I admire your ingenuity on this and it seems like a cool project that seems like it would be applicable in some instances.
August 18th, 2013, 05:36 PM
Sorry for the late responses, I was away for the weekend.
@Kravvitz No, I have yet to try a test on the scale of the amazon homepage. As I continue to refine the engine, I will also continue to produce more complex examples. That said, I simply do not anticipate real performance issues for any reasonable webpage based on my tests thus far. Each container requires requires one width, height, x-offset, and y-offset calculation, which I would say average to around 5 basic arithmetic operations each, as the code is optimized such that each container will only perform these 4 calculations only once per render cycle. I have not tried testing from a remote server... what issues do you envision would arise from this?
But even if I'm wrong about that, the style could still be applied using classes via the 'class' attribute in the XML document if you wanted to.
I appreciate the feedback!