PostCSS hfill lets you style contextual headings in CSS, like the proposed <h>
element.
/* etc. */
Only element specificity is used so that heading styles may be more easily overwritten. Despite the longevity of selectors, default styling contributes, at most, 311 bytes.
The default <x-h>
element is used to prevent stomping on the native namespace. This plugin is intended to produce contextual headings in JavaScript-free experiences, and may improve seach engine crawling. For dynamic usage, see hfill. For an HTML preprocessing option, see posthtml-hfill.
Options
tag
Type: String
Default: "x-h"
The tag used by contextual headings.
sizes
Type: Array
Default: [ "2em", "1.5em", "1.17em", "1em" ]
The font sizes given to each heading as it descends into the outline.
Usage
Add PostCSS hfill to your build tool:
npm install postcss-hfill --save-dev
Node
Use PostCSS hfill to process your CSS:
;
PostCSS
Add PostCSS to your build tool:
npm install postcss --save-dev
Use PostCSS hfill as a plugin:
;
Gulp
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Use PostCSS hfill in your Gulpfile:
var postcss = ; gulp;
Grunt
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Use PostCSS hfill in your Gruntfile:
grunt; grunt;