Five things I miss in HTML and CSS

As web developer for more then 25 years I have seen the web grown up. Started building websites in FrontPage '98. through the years I build layouts using framesets, tables, float, flex, and today grid. You could say that it was a long story. While the web is growing and upgrading itself to higher levels there are still a lot of gaps that needed to fill in. So it's time to share my HTML-wish list with all of you.

1. A build-in WYSIWYG editor

A few weeks ago I was busy with adding SUN-editor to my own blogging platform. At that time I was asking myself why is there no standard WYSIWYG editor build in the browser it self. Almost every web application is using some sort of editor. This is nothing new. It's the same for like 20 years and we still have to look for a working WYSIWYG editor on the web that is open source and working without any problems. through the years a lot of good editors went commercial and got behind a paywall. So it got harder and harder to find good ones. TinyMCE, CKEditor are no longer usable today without paying. Other editors are hard to install or unstable. Recently I installed SUN editor, while it works it is far from stable. I would really opt for a basic WYSIWYG editor within the browser it self. it should work in a simple way, just by adding an extra property to the HTML and use a JavaScript API for the configuration.

<textarea id="element" editor></textarea>
<script>
  document.getElementById('element').editor({});
</script>

2. Charts

Charts is also a big one on the internet. A lot of websites are using charts to display data. Mostly admin panels. While this on is also complex or even more complex then the WYSIWYG editor I believe this should also be part of the HTML standards. Since forever we had to use an external library to generate those charts. Around 2004 I generated charts using jpgraph, later on I start using multiple JavaScript libraries for this. I would be a big win if we can support for the most common charts types. Charts types like the line chart and bar charts and extends the chart types with time. This all should be done using HTML and a standard JavaScript API to set it up.

3. Autogrow textareas

Another one are textareas for years there was no way without JavaScript to grow them to make them fit the content you are filling in. Using JavaScript didn't always work though. My idea would be just to add a property autogrow on the textarea. However it seems like there is a better option just around the corner I recently discovered. Earlier this year Polypane posted a blog about the field-sizing CSS property. Just by using the example code below the textarea is growing until a height of 70% of the browser viewport.

textarea {
  field-sizing: content;
  width: 200px;
  max-height: 70svh;
}

While it is a great feature the browser support is not good at the moment. It is only supported by Chrome based browsers. Safari and Firefox lacking support for it at this moment in time.

4. Support for 3D models

In the last few years more and more 3D models are used in webdesigns. At the moment we can use the javascript library Three.js for it, but it is not easy to implent. Safari is the first browser with support of loading in 3D models. By using the HTML <model> element. In the current state it can be only used for static elements. As far as I know there is no support for animation triggers yet. Loading 3D models into the browser is a good first step. When animation triggers are supported it would perfect.

5. Depth attribute

Last year, I built a few 3D models using only HTML and CSS. Creating and controlling cubes was a difficult job. If there were a way to create cubes using a single CSS attribute, things would be a lot easier. So, I came up with the idea of using a 'depth' attribute as a third dimension alongside width and height. By using depth, you only need to tell the browser how thick an element is, and you're done. Besides using it for cubes, you can also use it to create a 3D text effect. You might even add a bevel effect to shave off the corners of the shape.

The CSS of should look something like below:

.text3D {
    font-size: 2rem;
    font-weight: 700;
    depth: 0.5rem;
    bezel: 0.125rem;
}

For a 3D cube the CSS would look something like this:

.cube3D{
    width: 100px;
    height: 100px;
    depth: 100px;
    bezel: 0.125rem;
    &::front {
        background-color: red;
    }
    &::back {
        background-color: blue;
    }
    &::left {
        background-color: green;
    }
    &::top {
        background-color: orange;
    }
}