I work with HTML & CSS daily, creating and amending websites. CSS gets a lot of hate from developers who don’t understand it, although imo it’s a very decent solution. However there are some things that catch me out & I’ve written down some solution here for future reference. I’ll probably add to this list over time. Continue reading CSS tricks that I keep having to remind myself about
Creating animation with SVGs, CSS animations, spritesheets & GSAP
I’ve created an animation using a few different methods that runs in a browser and is responsive (works on both mobiles, tablets and desktop). Continue reading Creating animation with SVGs, CSS animations, spritesheets & GSAP
Forcing a div to retain aspect ratio, but also expand if there’s more content
I’ve just been stuck on a problem for ages, and that’s to keep at a specific aspect ratio (on mobile, tablet and desktop), but also to allow it to expand if there’s more content inside it. Continue reading Forcing a div to retain aspect ratio, but also expand if there’s more content
Adding new breakpoints to Foundation’s XY grid
I just added some new breakpoints to Foundation 6’s new XY grid, and found it surprisingly simple. Continue reading Adding new breakpoints to Foundation’s XY grid
The difference between <a> and <button> elements
I’ve seen some markup recently where the <a> tag is being hijacked to do things it shouldn’t be used for, and where a <button> should be used instead. I was going to write a long article about the difference between a HTML <button> element (used normally to DO something), and the HTML <a> element (used normally to take you somewhere else) but I saw this great answer to a question on Quora by Jakob Persson who sums it up perfectly:
This has to do with the semantics of HTML.
An A tag is an anchor element and in the context of hypertext, helps link documents together. HTTP stands for “Hypertext Transfer Protocol” why hypertext is one of the foundational ideas of the web. The word “web” is a metaphor for this network of pages which all tie together, like a spider’s web.
A BUTTON is exactly that, a button. It doesn’t denote there being a relationship between the current document and other. It just says that it is a UI element which you can click.
CSS allows us to style things to look identical. But it doesn’t change the semantics, i.e. the meaning of different HTML elements.
- If your element links the user to another page, then it should be an A.
- If you want your site to “fail gracefully” when JS is absent, use an A tag that links to a page that relies on a server-side script and attach an event handler to it for the JS functionality.
– Jakob Persson