Today I discovered Incomplete List of Mistakes in the Design of CSS.
Tag Archives: css
CSS Variables and How To Use Them
A quick run down on CSS Variables and How To Use Them. Note the var() function can take 2nd parameter for a default value.
:root {
--primary-color: #333;
}
div {
color: var(--primary-color, #444);
}
p {
background-color: var(--primary-color);
}
.fancy {
border-color: var(--primary-color);
}
CSS Box Sizing
Read a good article about Box Sizing over on CSS Tricks.
In summary:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Full-Bleed Layout Using CSS Grid
Today I read about how to do a Full-Bleed Layout Using CSS Grid.
Axiomatic CSS and Lobotomized Owls
Today I learned about the “Lobotomized Owl” CSS selector over on Axiomatic CSS and Lobotomized Owls.
Things I Wish I’d Known About CSS
Today I read Things I Wish I’d Known About CSS. Good read about how some fundamental CSS things work.
Ten modern layouts in one line of CSS
Today I read Ten modern layouts in one line of CSS about advanced contemporary CSS features.
How to Customize Firefox’s User Interface With userChrome.css
Today I read How to Customize Firefox’s User Interface With userChrome.css. You may need to enable with e.g. Firefox 69: userChrome.css and userContent.css disabled by default. If you change userContent.css you need to open your page in a new tab to force an update. I would guess that if you change userChrome.css you will need to restart Firefox (I don’t know I’ve only been using userContent.css).
I should be clear: there are two files: userChrome.css (which affects Firefox features like toolbars and tabs etc) and userContent.css (which affects web pages loaded in Firefox).
I’ve been using userContent.css to fixup CSS on various websites. You can limit your changes to a particular domain in this way:
/* 2020-07-01 jj5 - SEE: https://exploringjs.com/impatient-js/toc.html */
@-moz-document domain(exploringjs.com) {
a:visited { color: purple !important; }
}
Making vertical-align work for table cells
See Understanding vertical-align, or “How (Not) To Vertically Center Content”. Just in case this ever vanishes it is cached here: https://www.jj5.net/file/2018-08-09-193156/vertical-align.html
HTML <table> CSS width not working
If your table isn’t automatically adjusting to the width specified by your CSS, make sure you haven’t set display: inline-block; on the <table> element.