What's the Deal with Collapsible Margins? | bitsofcode
Last week, I ran a twitter poll asking the following question - What would be the amount of space between two sibling divs, where the 1st has a margin-bottom of 10px and 2nd a margin-top of 30px? The result of this poll was that 39% of the 754 people who voted got the correct answer, which was 30px. [CSS Quiz] What would be the amount of space between two sibling divs, where the 1st has a margin-b
Linting HTML using CSS | bitsofcode
When HTML is written incorrectly, nothing much happens. Because of this, it's easy to have invalid, unsemantic, or unaccessible bits in markup without it being obvious. There are many ways we can lint our HTML to discover and fix these issues, for example using the W3C Markup Validation Service. Another thing we can do, which can be more easily integrated into a development workflow, is to use som
Asynchronous vs Deferred JavaScript | bitsofcode
In my article on Understanding the Critical Rendering Path, I wrote about the effect JavaScript files have on the Critical Rendering Path. JavaScript is considered a "parser blocking resource". This means that the parsing of the HTML document itself is blocked by JavaScript. When the parser reaches a <script> tag, whether that be internal or external, it stops to fetch (if it is external) and run
Understanding the Critical Rendering Path | bitsofcode
When a browser receives the HTML response for a page from the server, there are a lot of steps to be taken before pixels are drawn on the screen. This sequence the browsers needs to run through for the initial paint of the page is called the "Critical Rendering Path". Knowledge of the CRP is incredibly useful for understanding how a site's performance can be improved. There are 6 stages to the CRP
How calc() Works | bitsofcode
The CSS3 calc() function allows us to perform mathematical operations on property values. Instead of declaring, for example, static pixel values for an element's width, we can use calc() to specify that the width be the result of the addition of two or more numeric values. .foo { width: calc(100px + 50px); } Why calc()? # If you have used CSS pre-processors like SASS, the above example is somethin
3 New CSS Features to Learn in 2017 | bitsofcode
Happy new year! 🎊 With the new year, we have a whole new set of things to learn. Although there are many new features, these are 3 new CSS features I'm most excited about adopting this year. 1. Feature Queries # A while ago, I wrote about Feature Queries being the one CSS feature I really want. Well, now its basically here! It is now supported in every major browser (Opera Mini included) besides
The :target Trick | bitsofcode
The :target pseudo-class refers to an element within the document that the URL’s fragment points to. For example, this piece of text is wrapped in a <mark> element which has an ID of #target-test. If you went to the url, GHOST_URL/the-target-trick#target-test, then that element will be the target and and styles applied to the :target pseudo-class for that element will take effect. Last year, I wro
Styling Broken Images | bitsofcode
Broken images are ugly. But they don’t always have to be. We can use CSS to apply styles to the <img> element to provide a better experience than the default. Two Facts About The <img> Element # To understand how we can style broken images, there are two facts about the way the <img> element behaves that we need to understand first. We can apply regular typography-related styling to the <img> elem
The vertical-align Property | bitsofcode
The vertical-align property controls the vertical positioning of elements within their parent. It applies to inline-level elements and table-cell elements. It has 10 possible values - baseline sub super text-top text-bottom middle top bottom <length> <percentage> Typography Units # The different values for the vertical-align property are dependent on specific typography units. So, to understand th
How Floating Works | bitsofcode
Although I very rarely use floats nowadays, there are certain specific circumstances in which they are the only viable solution. In these rare cases, I find myself getting frustrated because they don't work in the way I think they should. So I decided to look into the rules that govern the behaviour of floats, and how to properly use them. The Rules of Floats # There are four values the float prop
Pseudo-Classes, Pseudo-Elements, and Colon Notation | bitsofcode
In my post about 5 lesser used CSS selectors, I used a single colon when referring to the first-letter and first-line pseudo-elements. It was pointed out to me that I should have used the double colon notation for selectors because they were pseudo-elements. So, in this article, I explore the difference between pseudo-elements and pseudo-classes and which colon syntax should be used. Pseudo-Classe
CSS Font Sizing | bitsofcode
Following on from last week's article in which I briefly discussed css pixel sizing, I decided to look into the different ways you can declare your font size with CSS. Meet the Units # There are several different ways you can declare the size of a font in CSS. Broadly speaking, the units fall into one of two categories - absolute and relative. Absolute units are fixed and (mostly) relate to some p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
6 Reasons to Start Using Flexbox | bitsofcode