How should I organize the contents of my CSS file(s)?

Have a look at these three slideshare presentations to start: Beautiful Maintainable CSS Maintainable CSS Efficient, maintainable, modular CSS Firstly, and most importantly, document your CSS. Whatever method you use to organize your CSS, be consistent and document it. Describe at the top of each file what is in that file, perhaps providing a table … Read more

Should I use max-device-width or max-width?

TL;DR If you’re making a responsive website, use min-width/max-width in your media queries rather than min-device-width/max-device-width in order to target a wider range of screen sizes. According to the 2018 Media Queries Level 4 specification draft, the device-width media feature is deprecated. It will be kept for backward compatibility, but should be avoided. 8. Appendix … Read more

How does the CSS Block Formatting Context work?

Block Formatting Contexts Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents. With my bold, it’s the establish bit that is … Read more

Display image at 50% of its “native” size

The zoom property sounds as though it’s perfect for Adam Ernst as it suits his target device. However, for those who need a solution to this and have to support as many devices as possible you can do the following: <img src=”…” onload=”this.width/=2;this.onload=null;” /> The reason for the this.onload=null addition is to avoid older browsers … Read more

Use multiple custom fonts using @font-face?

You simply add another @font-face rule: @font-face { font-family: CustomFont; src: url(‘CustomFont.ttf’); } @font-face { font-family: CustomFont2; src: url(‘CustomFont2.ttf’); } If your second font still doesn’t work, make sure you’re spelling its typeface name and its file name correctly, your browser caches are behaving, your OS isn’t messing around with a font of the same … Read more