Disco
KPCKevin Powell - Community
•Created by Disco on 5/22/2024 in #front-end
<a> wrapping an image extends below the image
I'm obviously not understanding something fundamental here, but the anchor tag that wraps each image in the following grid is adding height to each containing div:
https://codepen.io/adamantonio/pen/PovNLYE?editors=1100
This means that the scale effect on hover pushes the image out of the grid at the bottom only. I can see in the dev tools that the <a> is positioned towards the bottom of each <div> and has a "height" that extends below the image by a few pixels (see attachment).
I'm interested both in how to fix it, but why this is the default behaviour.
12 replies
KPCKevin Powell - Community
•Created by Disco on 7/13/2023 in #front-end
Thoughts on teaching logical properties to new students of web dev
I teach high school computing studies (~15 year olds) and we do a unit on web development, where of course I want students to fall madly, deeply in love with CSS 😉. I'm wondering what people's thoughts are on teaching logical properties instead of directional ones. I really like margin-inline and margin-block for example (and they are nice shortcuts in themselves!) but some, like border-end-start-radius I can see being more problematic for first-timers. It's not like we'll be creating real-world sites that will be translated into different languages and writing directions, but I think it's important that inclusivity and accessibility are considered. Some people think they make CSS easier to learn (https://chriscoyier.net/2023/05/02/do-logical-properties-make-css-easier-to-learn/), but what does the collective brains trust on here think?
9 replies
KPCKevin Powell - Community
•Created by Disco on 6/23/2023 in #front-end
Is there anything wrong with defining custom variables in html instead of :root?
I just think it's neater to make "global variables" in the context of the html selector, but I seem to only ever see examples that use :root. I thought they were the same thing in a web page so why not in html?
7 replies
KPCKevin Powell - Community
•Created by Disco on 6/18/2023 in #os-and-tools
Any way of updating the browser used for live preview in VS Code?
Not a big deal really, but the live preview extension seems to be running Chrome v108. Is there any way to update it?
3 replies