/* Code Comments */52 posts tagged with "css"
accessing media queries in javascript
2021-10-10
|~2 min read
|242 words
When we write media queries it’s mostly the case that we just need to reference that within our style sheet. What about those cases where we…
css: media queries for screen breakpoints
2021-10-10
|~2 min read
|345 words
When working with adaptive designs that handle different view ports, we may want to reach for a Media Query. A Single Media Query The…
css: sharing variables with javascript
2021-10-10
|~1 min read
|188 words
I wanted to use a CSS property as an input into some javascript recently and so I wondered if it was possible to share the value rather than…
html: styling details
2021-10-10
|~2 min read
|233 words
The tag is one of my favorites. I’ve written about it several times already in “Details Tags And Choosing Your Own Adventure On The Web…
css: centering elements easily
2021-10-10
|~2 min read
|323 words
When I first started writing websites, I thought of a web page as a page. That is, a piece of paper. 8.5” x 11”. But that’s not how it…
css: box model sizing
2021-10-10
|~4 min read
|620 words
There’s quite a bit to unpack when it comes to the box-model, which is why it’s a topic that I feel like I constantly need to revisit if I…
three css related dev tool tips
2021-10-10
|~2 min read
|260 words
Three quick dev tool tips courtesy of Josh W Comeau’s Css-for-JS course: Shift-Click Colors CSS Comments Unmet Dependencies (Firefox Only…
css experiments: polygons and gradients
2021-10-10
|~5 min read
|810 words
I recently read Will Boyd’s “Diving into the ::before and ::after Pseudo-Elements”. It’s fantastic. Go read it now if you want to learn a…
css flexbox, gutters, and negative margin
2021-10-10
|~3 min read
|410 words
I missed the days of using to design layouts on the web. Note, I don’t miss them, I missed them. I count myself lucky. Fortunately things…
chrome dev tools: css overview
2021-10-10
|~1 min read
|200 words
Chrome DevTools recently added an experimental new feature called CSS Overview which can provide really useful information on a site’s…
html: a second look at details
2021-10-10
|~2 min read
|391 words
On some pages, it may make sense to have some details hidden by default but present should a reader want additional information. That’s what…
global themes with css variables
2021-10-10
|~1 min read
|63 words
Themes are hard. I wrote about them previously here Emotion and Styled-Components aim to address this problem with a theme provider that…
accessible-borders
2021-10-10
|~1 min read
|25 words
A11y trick for making borders accessible - transparency. need to relisten to really understand. https://overcast.fm/+heX49Ze7E/23:06 related…
css modules: an introduction
2021-10-10
|~7 min read
|1344 words
I was looking through an app’s style sheets recently and came across a new word: : Looking above in the same file, I found : So, what’s…
a difference in (default) style: buttons vs links
2021-10-10
|~2 min read
|357 words
I was working on a project the other day when I noticed something curious. My nav bar looked great until I added a new button. nav bar with…
a difference in (default) style: buttons vs links
2021-10-10
|~2 min read
|357 words
I was working on a project the other day when I noticed something curious. My nav bar looked great until I added a new button. nav bar with…
css at-rules and logical operators in media-queries
2021-10-10
|~4 min read
|707 words
Yesterday, when I was writing about adding drop caps with css, I stumbled on two new features within CSS: The css at-rule Conditional Media…
css at-rules and logical operators in media-queries
2021-10-10
|~4 min read
|707 words
Yesterday, when I was writing about adding drop caps with css, I stumbled on two new features within CSS: The css at-rule Conditional Media…
adding drop letter with css
2021-10-10
|~4 min read
|704 words
I recently added a drop letter to my blog. I’ve always liked them in magazines and have seen them well used on the web. As with many things…
adding drop letter with css
2021-10-10
|~4 min read
|704 words
I recently added a drop letter to my blog. I’ve always liked them in magazines and have seen them well used on the web. As with many things…
masking inputs and more ref fun
2021-10-10
|~3 min read
|555 words
In learning about Auto-Complete In HTML Forms, I discovered that the of an makes can make a significant difference in how they are…
masking inputs and more ref fun
2021-10-10
|~3 min read
|555 words
In learning about Auto-Complete In HTML Forms, I discovered that the of an makes can make a significant difference in how they are…
object-fit for images and video
2021-10-10
|~1 min read
|91 words
is a CSS property that can be applied to images and video. It determines how the replaced element (i.e. the or tag) are resized to fit its…
object-fit for images and video
2021-10-10
|~1 min read
|91 words
is a CSS property that can be applied to images and video. It determines how the replaced element (i.e. the or tag) are resized to fit its…
styling markdown code snippets with prismjs
2021-10-10
|~7 min read
|1215 words
There are a number of different syntax highlighters for Javascript, but the one I’ve been using lately is PrismJS (due in large part to its…
styling markdown code snippets with prismjs
2021-10-10
|~7 min read
|1215 words
There are a number of different syntax highlighters for Javascript, but the one I’ve been using lately is PrismJS (due in large part to its…
css selectors
2021-10-10
|~5 min read
|940 words
Yesterday, I wrote about what the comma means in CSS. In doing so, I realized that it’s not actually considered a CSS selector. What the…
css selectors
2021-10-10
|~1 min read
|189 words
Yesterday, I wrote about what the comma means in CSS. In doing so, I realized that it’s not actually considered a CSS selector. What the…
commas in css: grouping selectors
2021-10-10
|~2 min read
|282 words
The number of times I’ve had to look up what the comma means in CSS is astounding. As usual, if I find myself doing something multiple times…
commas in css: grouping selectors
2021-10-10
|~2 min read
|282 words
The number of times I’ve had to look up what the comma means in CSS is astounding. As usual, if I find myself doing something multiple times…
global themes, variants, and modes with styled-components
2021-10-10
|~2 min read
|332 words
If I were to list my strengths, web design wouldn’t top the list. None the less, I like learning about it and know that I’ll continue to…
global themes, variants, and modes with styled-components
2021-10-10
|~2 min read
|332 words
If I were to list my strengths, web design wouldn’t top the list. None the less, I like learning about it and know that I’ll continue to…
css 'mixins' with styled components
2021-10-10
|~2 min read
|309 words
I’ve heard the term “mixin” a lot without ever really understanding it or why they’re valuable. I found the chapter on Mixins from the…
css "mixins" with styled components
2021-10-10
|~2 min read
|309 words
I’ve heard the term “mixin” a lot without ever really understanding it or why they’re valuable. I found the chapter on Mixins from the…
reusing css with styled components
2021-10-10
|~2 min read
|313 words
Styled components are really nice in compartmentalizing styling and keeping it close to the components that use it. I wasn’t around for the…
reusing css with styled components
2021-10-10
|~2 min read
|313 words
Styled components are really nice in compartmentalizing styling and keeping it close to the components that use it. I wasn’t around for the…
display: none vs visibility: hidden
2021-10-10
|~1 min read
|161 words
When hiding elements on the client, there are multiple options. Two of the most common are through the selective toggling ofCSS properties…
display: none vs visibility: hidden
2021-10-10
|~1 min read
|161 words
When hiding elements on the client, there are multiple options. Two of the most common are through the selective toggling ofCSS properties…
rem vs em
2021-10-10
|~1 min read
|113 words
Jeremy Church put together a nice little side by side comparison of REM and Em (and PX).1 Both REM and EM are relative units. The difference…
rem vs em
2021-10-10
|~1 min read
|113 words
Jeremy Church put together a nice little side by side comparison of REM and Em (and PX).1 Both REM and EM are relative units. The difference…
dealing with disappearing "position: fixed" on overflow?
2021-10-10
|~3 min read
|511 words
Have you ever tried to have an element overflow when one of its children is in a fixed positioned relative to it? Fun fact: It doesn’t work…
dealing with disappearing position: 'fixed' on overflow?
2021-10-10
|~3 min read
|511 words
Have you ever tried to have an element overflow when one of its children is in a fixed positioned relative to it? Fun fact: It doesn’t work…
:hover vs :focus
2021-10-10
|~2 min read
|317 words
Most of the time, these two pseudo-selectors act in concert. In fact, they’re so frequently triggered together that my naive testing…
:hover vs :focus
2021-10-10
|~2 min read
|317 words
Most of the time, these two pseudo-selectors act in concert. In fact, they’re so frequently triggered together that my naive testing…
trials in css: fit content to window
2021-10-10
|~3 min read
|476 words
One of my ongoing challenges with layouts on the web is the fact that a website does not naturally have an end. Unlike an 8.5”x11” sheet of…
trials in css: fit content to window
2021-10-10
|~3 min read
|478 words
One of my ongoing challenges with layouts on the web is the fact that a website does not naturally have an end. Unlike an 8.5”x11” sheet of…
buttons without style
2021-10-10
|~2 min read
|208 words
When it comes to accessibility (a11y) on the web, one of the best / easiest things you can do is to use semantic HTML. Structural, semantic…
buttons without style
2021-10-10
|~2 min read
|208 words
When it comes to accessibility (a11y) on the web, one of the best / easiest things you can do is to use semantic HTML. Structural, semantic…
hover events & different cursors with css
2021-10-10
|~2 min read
|306 words
More CSS fun today! One way to visually indicate that an element is clickable is by changing the cursor to a If a data element is supposed…
hover events & different cursors with css
2021-10-10
|~2 min read
|306 words
More CSS fun today! One way to visually indicate that an element is clickable is by changing the cursor to a If a data element is supposed…
lessons in queryselector and the importance of understanding mechanism
2021-10-10
|~3 min read
|460 words
NB: The below illustrations are inspired / adapted from MDN’s great page on QuerySelector. I did not come up with these examples (though I…
lessons in queryselector and the importance of understanding mechanism
2021-10-10
|~3 min read
|460 words
NB: The below illustrations are inspired / adapted from MDN’s great page on QuerySelector. I did not come up with these examples (though I…