Today I read Ten modern layouts in one line of CSS about advanced contemporary CSS features.
Tag Archives: css
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.
Tufte CSS
Reply
Check out Tufte CSS…
CSS height 100% not working
My CSS height value wasn’t being applied. Found this. The problem was that I needed to specify heights for all of the ancestor elements. Bug fixed!
QuirkTools Screenfly
Found out about this handy utility the other day: ScreenFly.
It allows you to test your website on various device form-factors. Handy!
Round corners with CSS
Today I had to look up the CSS syntax for curved corners and I found this article which suggested:
#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}
Align an HTML table in the center of the page
Today I found this discussion which showed how to align a table in the center of the page in HTML:
table {
width: 50%;
margin-left: auto;
margin-right: auto;
}
or:
table {
width: 200px;
margin-left: auto;
margin-right: auto;
}
Compass
Brad brought the Compass CSS Authoring Framework to my attention the other day.