Geek Answers Handbook

What are the potential problems using this system for web page layout?

Frustrated by the many limitations and CSS compatibility issues, and I constantly need to write javascript code so that my web pages render the way I wanted, I thought I could optimize future projects by completely discarding CSS to structure the page.

I wrote a javascript library that parses layouts specified in XML files and applies them to an HTML document using absolutely positioned and dimensional, non-nested divs. Therefore, the idea is that on each page there is an HTML file containing all the content, an XML file that defines how this content should be placed on the page, and a CSS stylesheet for the surface style.

Here is an example. (click the button to inflate the layout tested in the latest version of all major browsers). And further.

This system is gracefully deformed into simple html and even allows you to split the style when javascript is disabled.

It seems to me that this approach not only eliminates many problems with the cross browser, but also allows me to create more complex layouts at a lower cost. For example, I understand that the following cannot be done only with CSS, at least not without a mess of nested divs:

  • Set the item to fill in the available width or height in your parent container. (This is not the same as width / height: 100% if there are other elements in the parent container.)
  • Align any element top / center / bottom, left / center / right inside any container, even if its size is unknown.
  • Draw an element of unknown size without increasing the size of these elements (for example, if the div is set to 100% of the window size, it cannot be supplemented without overflowing the window.)
  • Automatically set all elements in the parent element at the same distance from each other.
  • Set the height of the floating element. Similarly, independently set the wrapping behavior horizontally and vertically.
  • Set elements for float in columns, not in rows (CSS3 seems to support columns, but browser compatibility is not very good)

However, I am sure this is considered blasphemous. So what are the potential problems using this system for web page layout?

EDIT: code is on github

+7
source share
4 answers

You are essentially trying to rewrite CSS so that you feel better than CSS. It may be good - it may work for you, but you will run into limitations.

The rest of the world uses CSS. It's usually easier to get one person (you) to learn and follow a standard than to try to get the whole world to learn and follow your standard. If you are developing someone else, instead of bringing your CSS and HTML knowledge to the table, they will have to learn their web development method.

If you go to work elsewhere, you will either have to convince them that you can bring your method to the table, and not use the world standard CSS (usually this does not apply to the corporate environment), or you will have to learn how to use CSS correctly.

If you want help from anyone else (for example, here on stackoverflow), you cannot, as everyone else uses CSS. But if you have problems with CSS, we can help.

That is why it can be considered "blasphemous." I'm sure you wrote this question, intending to get feedback on potential technical issues with this approach, but I think political / social issues are just as important.

+4
source

You invented a more powerful page layout system. It should be noted that CSS already has draft specifications for other such systems:

Here is a January 2013 review of these proposals, followed by a 2011 review.

These specifications are draft only. Some of them are likely to eventually be disposed of or combined with other specifications. Several browsers already implement parts of these specifications, usually behind vendor prefixes.

Although you cannot reliably use these functions in your CSS today, you should consider the design of these specifications when writing your library. You must copy portions of your projects that offer powerful layout tools, or that are clean and reliable in the future.

Best of all, instead of writing your own JavaScript library and XML syntax, just use existing Java policies such as these (not an exhaustive list):

You would use policies like these in conjunction with CSS using drawing syntax.

Even if these polyfields are not fully functional or stable enough to use, you can call them from your library or at least copy some of their code.

+3
source

"Frustrated by the many limitations and CSS compatibility issues, and I constantly need to write javascript code to get my web pages in the layout as I wanted," suggests that you either used CSS incorrectly or didn’t actually set enough time, studying all the CSS inputs and outputs to get it to do what you want (setting up good, universal CSS is hard, just like JS programming), and there are a million ways to do it wrong - just like JS programming) .

Your example seems to work on a 100% height page. This is actually relatively easy if you set html and body to a height: for example, 100%. Once you do this, h / valigning boxes becomes very easy.

Then, answering your question: doing your whole style using JS calls will be much more expensive than using CSS, so I strongly suspect your solution will be much worse than good CSS or CSS + JS. Browsers have extremely optimized code for performing calculations using CSS triggers, and the same thing in JavaScript is several times slower. Using JS for a specific style, because CSS does not have a function, for example, field alignment, as your example, is usually a necessity, but every time you run it, it will have to re-run the full algorithm in JS code, and not use its own The compiler has much faster plugin libraries that may be available for some or all of the models you want to achieve.

+1
source

I do not see any problems with this, except that you will need to provide identical output for all browsers that you decide to support. In addition, you will have to deal with situations where the number of elements on a page is a variable, such as a photo gallery or comment page. I can tell you from experience that many small elements located absolutely will greatly degrade page performance. You will notice this when scrolling and resizing the window when reaching 50-100 elements. Instead, do what Google Images does in this situation; set the elements to display: inline-block and adjust their width, then allow them to naturally wrap.

I also believe that to indicate that points # 1 and # 2 can be easily done in CSS using position: relative for the parent and position: absolute for the children, and item # 3 can be solved by setting box-sizing: border-box on the child . You can use the padding-box , but this is not well supported.

Some of your concerns are also addressed in CSS3. You mentioned CSS3 columns. See calc . For example, you can do this to center an element with a dynamic size:

 left: 50%; top: 50%; margin-left: calc(-width / 2) margin-top: calc(-height / 2)
0
source

More articles:


All Articles