I often add blank lines around HTML that I am modifying to make things clearer. 

 Most times it does not make any difference. An HTML minifier will remove the blank lines. 

 I also often comment out old HTML code with '<!--' an '-->'



Comments

Post a Comment

Popular posts from this blog

How a CSS fish animation works

Image
 I have been adapting an animation of fish circling as in a bowl with bubbles rising in the middle. The original is by Yusuke Nakaya. See:      'codepen.io/YusukeNakaya/pen/WNopRwX' The fish are made of CSS triangles:     .pfshFish-body .pfshScale {         width: 0;         height: 0;         border-width: 0 0 3.125em 6.25em;     @keyframes fishColor {       0% {         border-color: transparent transparent #6C99C6 transparent; The triangles are reflected around the 'x' and 'y' axes to make one side of the body of the fish:     .pfshFish-body .pfshScale.-pfshTop.-pfshFront {         transform: scale(1, 1) skewX(4.5deg) rotateY(-11deg) rotateX(23deg)                    translate(0.09375em, 0.15625em);     }     .pfshFish-body .pfshScale.-pfshTop.-pfshBack...
Read more

Selecting adjacent elements on :hover with CSS

Image
 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...
Read more

Setting the 'class' of an SVG element

Image
 I could not set the 'class' of an SVG element using the 'className' property in JavaScript. For example:     var bfyvSVG =              document.createElementNS('http://www.w3.org/2000/svg', 'svg');     bfyvSVG.id = 'bfyvSVG';     bfyvSVG.className = 'bfyvSvg-defs'; One answer is to use 'setAttribute':     bfyvSVG.setAttribute("class","bfyvSvg-defs"); I found the answer on 'stackoverflow.com':     stackoverflow.com/questions/37943006/unable-to-change-class-name-of-svg-element For an SVG, 'className' means something a little different. I could have used 'className.baseVal'
Read more