JavaScript tips

 I wanted to lighten and shrink buttons adjacent to the button that I am hovering over. But some of the buttons are inside a containing 'div'. For example, I have 2 'div' elements with CSS class 'outer', and each 'div' contains 'input' elements which have a CSS class 'inner'. So I first say:     .inner:hover  ~ .inner,      .inner:has(~ .inner:hover) {         opacity: 0.7;         transform: scale3d(0.9,0.9,1);     }  The above works for 'inner' elements within the same 'outer' element. The '~' is the 'sibling selector'. Then for the 'hover' to affect following 'outer' elements:     .outer:has(.inner:hover)  ~ .outer .inner {         opacity: 0.7;         transform: scale3d(0.9,0.9,1);     }  The above saya: "if an 'outer' element has an 'inner' child that is being hovered over, and is followed by an 'outer' element then apply t...

 Animating the 'letter-spacing' of a centred piece of text is simple and looks nice. There is an example on 'codepen.io':     'codepen.io/Bert-Beckwith/pen/myVBZdw' This was one of my first animations for my game. I used JavaScript to do the animation. This looks a bit jerky but uses much less resources than the smoother simple CSS animation above. 

 I often make an error in my CSS by commenting out a chunk of CSS but forgetting about a comment already inside the chunk. Some CSS following the chunk then does not run. But browsers soon recover and later CSS runs fine. I like how browsers display a web page even when there are errors in the HTML or CSS. Sometimes I also put JavaScript '//' comments in CSS which also confuses browsers.

 If I set a 'transform-style' of 'preserve-3d' on an HTML element then 'position: fixed' does not work. This seems similar to having 'position: fixed' under something with a 'transform'. Here, the 'fixed' behavior does not work.