Auto margin in CSS Grid items
Using auto margin to center an item in both the horizontal and vertical axes is tricky — unless that item is a grid item. Advertisements
All posts filed under: webdev
Timed Text Markup (Subtitles) in HTML Video, Demo from W3C
A while ago, I stumbled across a demo in W3C website that lets you add really cool subtitles to a video.
CSS Target (pseudo-class) Animation
I’ve known about :target for a while and have always found it to be quiet useful, but I think with an added animation spin to it, it can be truly profitable 👍
A quick look at the CSS Grid tool in Firefox – video
Firefox Quantum: Developer Edition has a very useful tool to inspect the CSS grid layout in websites. Check out how to access and use it.
How to add Fonts to Codepen
For the codepen output, if you want to add fonts, like google fonts, you can do that in more than one way.
Grouping browser specific CSS code with @supports
Another quick tip, today! This time it’s about the CSS @supports rule. The rule checks for the browser support, or the lack of it, of a given CSS property/value and applies some style if that check is passed.
Naming boolean variables
Whether you’re naming human babies or variables in code, the struggle is real. Okay, that maybe was a little exaggerated — naming babies is much easier. So, let’s take a look at a naming rule for boolean that most folks follow and is kinda awesome.
Using Base URLs in Codepen Pens
Using Codepen more and more, often to experiment and for demos to show the code I’m working with, I’ve learned to make my Codepen workflow smoother with little tacks here and there. One of which is finding a way to avoid repeating a same base URL in the HTML, in Pens. Here’s what I mean…
CSS Counter and Radio Buttons
I’ll be honest. The one ☝️ thing I’ve not much used CSS Counter for is numbering headings which ironically is the prime example shown in all its tutorials. Although counting header elements is EXTREMELY useful, I’ve found more use for Counter with other elements.
How to Use Emojis as Icons
Icons have become an important part of web designs. Granted there are many online resources (both free and paid) for icons, we still should be able to use the one style of symbols we already have and are uber familiar with — emojis, as icons.
