HTML, CSS, JavaScript & PHP
How to click, tap or select one HTML object through another.
For example: I had an image and I wanted to show a caption and a link to the photographer on hover, but I also wanted the image to be clickable to open a bigger version in a modal/lightbox. pointer-events makes that possible.
How to position a background image relative to the bottom or right side of the screen
.bgimg {
background-image: url('img.jpeg');
background-position: right 10% bottom 76px;
}The 10% is relative to the right of the screen, the 76px is relative to the bottom.
For years the first thing I would do on a new project is add a { text-decoration: none; } in some form or other to the styling of any website. However I was going to make links look, I was not leaving that offensive-looking text-decoration:underline; in place.
But text-decoration is growing up and browser support for the new options is improving, including, for example, the increased support in the recent release of Firefox 70.
My favorite feature is that underline can skip glyphs now, if you want! Followed almost immediately by my second favorite feature: text-underline-offset: <length>; There are more options than just <length>, read more on text-underline-offset here at MDN web docs. Between these two text-decoration: underline; can actually look classy.
Unfortunately, support for text-underline-offset is even less: Firefox and Safari at the moment. Glyph skipping specifically is supported much better with text-decoration-skip-ink in Firefox, Chrome and Opera. And most browsers now support a shorthand version of text-decoration which can also set color. Lovely!
Read more about all of it at MDN web docs.