aspect-ratio.css

aspect-ratio.css

img {
	/* Every css property should have its default value */
	aspect-ratio: intrinsic;
	/* same as */
	aspect-ratio: initial;
}

/**
 * Keyword `intrinsic` tells brower to try to get the ratio
 * from the element itself.
 * Say, 800x600 JPEG has intrinsic ratio 4/3 or 1.33333...
 */

/**
 * Picking `intrinsic` as a default would mimic the ad-hoc
 * browser convention for the <img> element.
 * Another reason is the fact authors would rather expect image
 * ratio of an image to be natural after applying `all: initial`.
 */

div {
	/* Force aspect ratio */
	aspect-ratio: calc(3 / 4);
}

/**
 * `aspect-ratio: calc(3 / 4)` maybe seems too verbose compared
 * to `aspect-ratio: 3 / 4`, but this conservative approach may have
 * several benefits:
 *
 * - `aspect-ratio: 3 / 4` would need a new parser rule, similar to one
 *   in the `font: 14pt/1.5;`. It can be a problem for CSS preprocessors:
 *   http://sass-lang.com/documentation/file.SASS_REFERENCE.html#division-and-slash
 *
 * - Talking of preprocessors. With a too smart preprocessor we can
 *   end up with `aspect-ratio: 1.333`. How should it be parsed?
 *
 * - using calc would look more ugly than it's needed:
 *   `aspect-ratio: calc(100wv - 4pt)/calc(100wh - 4pt)`
 */

video {
	/* Aspect ratio should be able to accept the fallback */
	aspect-ratio: intrinsic, calc(3 / 4);
	/**
	 * In this case aspect ratio of yet unloaded video is 3/4.
	 * As soon as the browser gets the ratio from the stream metainfo,
	 * it should use that ratio instead.
	 */
}


/** P.S.: Maybe we could pick a `native` keyword instead of
 * `intrinsic`. "intrinsic" better describes the thing, but
 * "native" is more easy (for a non-native English speaker) to type
 */