Tag: CSS

Categories
HTML/CSS

automatically count headers via css

CSS 2.1 introduced counters which can be used to auto number your headings or other elements. You can define a counter, which will incremented for every element of a specific class or it will reset an other counter.

A simple example would be to automatic prefix all h2 and h3 tags with automatic numbering. The counter will be used in a :before pseudo element for output. 

h1 {
  counter-reset: h2counter;
}

h2:before {
  content: counter(h2counter) ".\0000a0\0000a0";
  counter-increment: h2counter;
  counter-reset: h3counter;
}

h3:before {
  content: counter(h2counter)"."counter(h3counter) ".\0000a0\0000a0";
  counter-increment: h3counter;
  counter-reset: h4counter;
}

“\0000a0” is the NO-BREAK-SPACE Unicode Character.

Categories
HTML/CSS Javascript Polymer/Webcomponents

position:fixed and translate3d

Actually, I thought I understood position:fixed in HTML/CSS, but then I had some trouble in combination with transform:translate3d.  Generally position:fixed of an element means, you will have this element relative to the viewport (the browser window) fixed positioned, regardless any scroll-position.

For example the following HTML-Code

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div style="position:absolute; left: 20px; top: 20px; width: 150px;  background-color: #7FDBFF">
<h1>positioned Box</h1>
<p>
Lorem ipsum ...
</p>
<div style="position:fixed; background-color:#FF851B; left: 50px; top:50px;width:100px;height: 30px;">
Fixed Box
</div>
</div>
<div style="position:absolute; left: 250px; top: 20px; width: 150px;  background-color: #2ECC40">
<h1>translated Box</h1>
<p>
Lorem ipsum...</p>
<div style="position:fixed; background-color:#FF4136; left: 50px; top:90px;width:100px;height: 30px;">
Fixed Box
</div>
</div>

You will see two absolute positioned boxes (an aqua and a green one) and two fixed boxes (orange and red), which are children of the absolute positioned boxes.

boxes1

The CSS-transform API gives now the possibility to use translate3d as a fast left/top replacement. So we can rewrite the green box to:

?View Code HTML
1
2
3
4
5
6
7
8

<div style="position:absolute; transform: translate3d(250px, 20px, 0px); width: 150px;  background-color: #2ECC40">
<h1>translated Box</h1>
<p>
Lorem ipsum...</p>
<div style="position:fixed; background-color:#FF4136; left: 50px; top:90px;width:100px;height: 30px;">
Fixed Box
</div>
</div>

We would expect the same result, but got a different one:

boxes2

You see that the red box is jumped to the right. The reason for this result is due to the fact, that translate3d moves the virtual viewport and so the root of the fixed position-relation. Unfortunately the common function getClientBoundingRect, which gives you the rectangle in the viewport, did not respect the translate3d transformation, so that common elements like Polymers iron-dropdown did not work properly anymore.

Until now I have no common solution for that problem, comments are welcome!

You can see, and play around, with my example on JSFiddle.

And also the polymer example shows the problem.