Martin Auswöger ausi

Keybase proof

I hereby claim:

I am ausi on github.
I am ausi (https://keybase.io/ausi) on keybase.
I have a public key whose fingerprint is 5F6E EA2D FE2A 5606 A6E7 5974 CB1E 3861 1DB7 EA43

To claim this, I am signing this object:

Draft for a Container Query PostCSS Plugin

With @create-container <sizes>; you can define that a specific selector acts as a main container on your page (e.g. sidebar, content, header). As <sizes> you set the size of this container as it will be in the rendered page, the syntax is the same as for the sizes attribute for images.

With @container (<query>) {} you can query against the size of the containers instead of the viewport. These queries will be translated to media queries with the container classes added.

Pros

Doesn’t require a JavaScript runtime

	<!doctype html>
	<meta charset="utf-8">
	<body>
	<script>
	(function(){

	testElementCount(1, function() {
	testElementCount(10, function() {
	testElementCount(100, function() {
	testElementCount(1000, function() {

	<?php

	declare(strict_types=1);

	function numberToString($number, $precision = null)
	{
	if (is_int($number)) {
	return (string) $number;
	}

	/**
	* SVG cursors experiments
	*/

	html {
	height: 100vh;
	cursor: busy;
	cursor: -webkit-image-set(url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 100 100">\
	<style>@keyframes dance{to { transform: rotate(-10deg);}</style>\
	<text y="1em" style="font-size: 90px; animation: dance .5s infinite alternate">🦄</text></svg>') 2x), not-allowed;

	/**
	* SVG cursors experiments
	*/

	html {
	height: 100vh;
	cursor: busy;
	cursor: -webkit-image-set(url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 100 100">\
	<style>@keyframes dance{to { transform: rotate(-10deg);}</style>\
	<text y="1em" style="font-size: 90px; animation: dance .5s infinite alternate">🦄</text></svg>') 2x), not-allowed;

	/**
	* SVG cursors experiments
	*/

	html {
	height: 100vh;
	animation: test 0.01s infinite;
	--image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 100 100">\
	<style>@keyframes dance{to { transform: rotate(-10deg);}</style>\
	<text y="1em" style="font-size: 90px; animation: dance .5s infinite alternate">🦄</text></svg>');

	<?php

	$host = '127.0.0.1';
	$user = 'root';
	$pwd = '';
	$db = 'example';
	$port = 3306;

	// Setup table and data
	$conn = new mysqli($host, $user, $pwd, $db, $port);