How the minmax() Function Works | bitsofcode
One incredibly useful new feature introduced with the CSS Grid Layout Specification is the minmax() function. This function opens the door to us being able to write much more powerful and succinct CSS by allowing us to set, as a value for a grid track, a function including both a minimum and maximum value. The minmax() Function # The minmax() function accepts two parameters, a minimum value and a
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
5 Lesser Used CSS Selectors | bitsofcode
If you are new to CSS, the selectors you use are probably limited to class names, IDs and generic elements. In fact, there are in total 38 css selectors, varying greatly in complexity. Here are 5 css selectors you may not have known about, and some use cases for them. Selector Type Description foo:empty structural pseudo-class a foo element that has no children foo::first-letter &foo::first-line p
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
A Gulp Workflow for Building HTML Email | bitsofcode
Every week when I publish a new article to this site, I use MailChimp to send out an rss-based newsletter with the latest article to people subscribed. I designed and built the template for this newsletter and, as you would expect, it was quite a process. I was initially using Jekyll and going a lot of things manually, but the whole process was just really a mess. So, I have been working on creati
The Problem with iOS Safari and shrink-to-fit | bitsofcode
For a long time, the standard viewport meta tag went like this - <meta name="viewport" content="width=device-width, initial-scale=1"> However, since iOS Safari 9.0 was introduced in September last year, a new additional value is now needed for most responsive websites, making this the new standard meta tag - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> Why
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
Viewport vs Percentage Units | bitsofcode
In my article about CSS font sizes, I wrote about the (relatively) new viewport units. These units - vw, vh, vmin, and vmax - are based on the size of the browser viewport. Because their actual size changes depending on the viewport size, this makes them great units for responsive design. Although in my previous post I argued against using these units for font sizes, they can be very useful for de
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
