Asked  7 Months ago    Answers:  5   Viewed   21 times

I want to create something like


Can it be done in HTML5? I know I can do it with

<ul id="menu">
        <ul id="lunch">
            <li class="dish">aaa</li>
            <li class="dish">bbb</li>
        <ul id="dinner">
            <li class="dish">ccc</li>

but it is so much less readable :(



You can use custom tags in browsers, although they won’t be HTML5 (see Are custom elements valid HTML5? and the HTML5 spec).

Let's assume you want to use a custom tag element called <stack>. Here's what you should do...


Normalize its attributes in your CSS Stylesheet (think css reset) - Example:

 stack{display:block;margin:0;padding:0;border:0; ... }


To get it to work in old versions of Internet Explorer, you need to append this script to the head (Important if you need it to work in older versions of IE!):

 <!--[if lt IE 9]> 
 <script> document.createElement("stack"); </script>

Then you can use your custom tag freely.


Feel free to set attributes as well...

<stack id="st2" class="nice"> hello </stack>
Tuesday, June 1, 2021
answered 7 Months ago

I found a way to do it client-side, using a new html5 feature: blobs.

window.URL = window.URL || window.webkitURL;

var myGrammar = new Blob(["My custom grammar"], {
     type: 'text/xml Or whatever is the proper MIME type for grammars'});

var grammarUrl = window.URL.createObjectURL(myGrammar); 

myInput = document.getElementById("myInput");

myInput.grammar = grammarUrl;

This makes a url out of the grammar string, and then sets that url for our input element.

This way there is no need to make a server request, thus making it faster and less load on the server.

For more information on blobs, see this and this.

Tuesday, August 10, 2021
answered 4 Months ago

The HTML 4.01 Transitional doctype causes Almost Standards mode in browsers. The HTML5 doctype causes Standards mode.

This Microsoft article explains the difference: .

It says that for Almost Standards mode:

Inline elements contribute to line height if and only if one of the following is true.

If the element:

  • Contains text characters

  • Has a nonzero border width

  • Has a nonzero margin

  • Has a nonzero padding

  • Has a background image

  • Has vertical-align set to a value other than baseline

Note that a line break is not considered a text character for this definition unless it is the only content of a line box. In that case, the line box height remains the uppermost inline box top and the lowermost inline box bottom on the line, regardless of the specified line height.

If an img element is the sole content of a table cell, the line box height of the cell line box height is adjusted to zero.

Most critically in your case, it means that the calculation of the height of the line containing the image doesn't include the strut, an imaginary inline element that should increase the line height to the line-height value of the h1 element.

This jsfiddle shows a real span element with an &nbsp; as real text content standing in for the strut, and you can see that the layout is the same with both an HTML 4.01 Transitional doctype and an HTML5 doctype.

This jsfiddle shows the same idea, only this time the strut is fabricated using CSS, like this:

h1:before {
   content: 'A0';

In the case of khurram's answer, what he is doing is reducing the line-height of the h1 and hence, in standards mode, the height of the strut to be less than the height of the image. This means that the height of the line as a whole is determined by the height of the image, not the height of the strut. The height of the image is the same in both standards and almost standards mode so again, you don't see a difference in rendering between the modes.

As for why setting the line-height of the h1 to match the height of the image (25px) doesn't work but setting it to 12px does, that's because the strut establishes not only a top and a bottom, but also a baseline for the line. The baseline is a little above the bottom to allow for text descenders, for normal size text that's usually about 3px. The image by default sits on the baseline so the gap between the baseline and the bottom is added to the height of image to establish the height of the line.

This can be resolved by moving the image off the baseline, by using img { vertical-align: top }, which is shown in this jsfiddle. If you tinker with the h1 line-height here, you will see that values greater than 25px increase the spacing between the lines, but values of 25px or less do not change that spacing.

Friday, August 13, 2021
answered 4 Months ago
image-rendering: -webkit-optimize-contrast; /* webkit */
image-rendering: -moz-crisp-edges /* Firefox */ can provide a fallback case using canvas and getImageData. In short:

// Create an offscreen canvas, draw an image to it, and fetch the pixels
var offtx = document.createElement('canvas').getContext('2d');
var imgData = offtx.getImageData(0,0,img1.width,img1.height).data;

// Draw the zoomed-up pixels to a different canvas context
for (var x=0;x<img1.width;++x){
  for (var y=0;y<img1.height;++y){
    // Find the starting index in the one-dimensional image data
    var i = (y*img1.width + x)*4;
    var r = imgData[i  ];
    var g = imgData[i+1];
    var b = imgData[i+2];
    var a = imgData[i+3];
    ctx2.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";

More: MDN docs on image-rendering

Monday, September 6, 2021
answered 3 Months ago

Boilerplate's css uses few hacks like * (*font-size:small;) and some browser specific css rules - if you are really concerned about validation just move the hacky rules out of the main style.css and load them for the browser that needs them only.

You can be either hacky and crossbrowser or valid and degraded. And don't forget that boilerplate also states:

Think there's too much? The HTML5 Boilerplate is delete-key friendly. :)

But if you ask me - its waste of time trying to pass the css validation and still be crossbrowser compatible - if your client demands it and has extra money to pay for the css valid badge (which probably won't generate them any extra income) than go for it, if you personaly are obsessed by having to pass it go for it - otherwise it's nonsense and waste of your time. If you wrote all of the valid css3 rules correctly and used a few vendor specific rules it won't really kill anyone.

Overall Boilerplate is a solid template and perfectly ok to use for every day projects and the problems you are exposing are more of a perfectionist's view on the thing. This would be my 2 cents on this.

Sunday, October 10, 2021
Jakob Gade
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :