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
Ok, as it turned out, I needed to restart my Chrome. I often connect my macbook air to a 24 inch monitor. It looks like Chrome displays the colours incorrectly when I change to a monitor that’s different from what was used when Chrome was started. I found the answer on the Google Help forum … Read more
#navigation .navigationLevel2 li { color: #f00; }
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
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
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=”https://stackoverflow.com/questions/7699621/…” onload=”this.width/=2;this.onload=null;” /> The reason for the this.onload=null addition is to avoid older browsers … Read more
You can use this to wrap : .wrap { white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Firefox */ white-space: -pre-wrap; /* Opera <7 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* IE */ }
specify a more specific selector, eg prefix an ID before it or prefix the nodename before the class assign it after the other class if two classes are in separate files, import the priority file second !important !important is the lazy way, but you really should go for #1 to avoid important-ception. Once you’ve added … Read more
Simply use the command sass –watch <input folder>:<output folder>, like this: $ ls -l css/ sass/ $ sass –watch sass:css Where <input folder> contains the Sass files and <output folder> that hosts the generated CSS files.
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