HTML, CSS, JavaScript & PHP
What: Firefox 68+ and Safari 11.1+ support the pseudo-element ::marker yay! Chrome doesn’t yet, and neither do Edge or IE11. It will allow for:
li::marker {
color: #ff3399;
content: "-";
}
Not just on list-items either, but also on elements with a display: list-item.
CSS-Tricks has more about this: Finally, it Will Be Easy to Change the Color of List Bullets.
I had to clean up a hacked WordPress site recently and one of the steps I took was to scan the entire site with Automattic’s Exploit Scanner.
It needs a hash file for the version of WP you’re scanning and since it hasn’t been updated in 2 years or so, it doesn’t have them. There have been several security updates since, so it doesn’t even have them for older versions of WP. This is easy enough to solve since the plugin itself comes with a hashes-generator.php.
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.
.gallery-item:nth-of-type(3n+2):last-of-type
I was working on a gallery with rows of 3 items per row for which the markup contained <br> after every third .gallery-item and the CSS used floats. It didn’t look how I wanted it to and needed to change it anyway, so I decided to also get rid of the floats and break-tags and use display: flex instead.
Read more:last-of-type but only if it meets other conditions as well
What: Changing the standard straight quotation marks that the q-tag applies to whatever you want:
q {
quotes: "“" "”";
} Where: From the always useful Frontend Focus newsletter.
What: If you put a transition on the :hover instead of on the :link, it only transitions one way. If you put the transition on the :link, it will transition each way. Usually this is exactly what you want because once you move the cursor off the link, the effect will be gradually transitioned back instead of being removed abruptly.
I have a little WordPress plugin I use on some of my sites and it employs shortcodes. The shortcodes are not self-closing and they are wrapped in more shortcodes. They’re nested shortcodes. Using them looks like this:
[ltabjes talen="Taal Language"][ltab taal="Taal"] Content [/ltab][ltab taal="Language"] More content [/ltab][/ltabjes]
WordPress wraps p-tags around each of these shortcode tags, and adds more p-tags inside the shortcodes, adding more space than is wanted. All those empty p-tags are a drag. The shortcode_unautop function removes the outer paragraph tags, but not the inner ones. I don’t want to remove wpautop altogether because the content in the shortcode might still need it. How to solve this?
The static site generators that seem to be so popular at the moment are not all that appealing to me. I’ve looked at the more popular ones several times and I just can’t convince myself to invest any time in them. WordPress sites, which is what I’ve been building most over the last several years, aside from old-fashioned static sites, can really get on my nerves, both with how slow they are and how much maintenance WordPress itself needs to keep a site safely and functionally up and running. I’ve been eyeing flat-file CMSs for a while now because they’re fast, easy to install, and give my clients a way to manage content.
What: A quick list of flat-file content management systems for reference, with some of my thoughts added when I think those thoughts might be of use to me later. I did a lot of searching around today, a lot of reading documentation and some actual testing. These all seem to be actively maintained, have documentation and demos and/or are free (to try).
It’s been years since I had to make a print version of a webpage and support for page-break-before and page-break-after in Chrome seems to have improved in the mean time–even if I’m really supposed to switch to break-after (support for that seems to be lacking in Chrome, Edge, Safari and Internet Explorer).
I knew floats could cripple page breaks but I wasn’t using any floats so I wasn’t sure why it wasn’t working…
What: Make a functional accordion with HTML. CSS is optional for styling and no JavaScript is needed. I love simple, I love lightweight, less is more. And in browsers in which it doesn’t work, all the content is still visible, which also improves accessibility.