Семь Будущих Чудес CSS

Семь будущих чудес CSS

Спецификации?

@csswg

      .car {
        offset-path: path('M490,100 l 115,0 l 30,460 l -80,0 l 0,-300 q-70,-70 -76,-110 z');
        offset-distance: 0;
        offset-rotate: auto 90deg;
      }
    

      .car {
        animation: move 8s linear infinite;
      }
      

      @keyframes move {
        from { offset-distance: 0; }
        to { offset-distance: 100%; }
      }
      
    

CSS Motion Path Module: Level 1

			.shape {
				float: left;
			}
		

The shape is extracted and computed based on the alpha channel of the specified image as defined by shape-image-threshold.

User agents must use the potentially CORS-enabled fetch method defined by the [HTML5] specification for all URLs in a shape-outside value. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet’s URL and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.

			.shape {
				float: left;
				shape-outside: circle(50% at 50% 50%);
			}
		

The shape is extracted and computed based on the alpha channel of the specified image as defined by shape-image-threshold.

User agents must use the potentially CORS-enabled fetch method defined by the [HTML5] specification for all URLs in a shape-outside value. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet’s URL and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.

			.shape {
				float: left;
				shape-outside: polygon(
		50% 0%,
		100% 25%,
		100% 75%,
		50% 100%,
		0% 75%,
		0% 25%
	);
			}
		

User agents must use the potentially CORS-enabled fetch method defined by the [HTML5] specification for all URLs in a shape-outside value. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet’s URL and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.URL and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.URL and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.URL and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.URL and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.URL and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.URL and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.URL and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.URL and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.

CSS Shapes Module: Level 1

CSS Writing Modes: Level 3

CSS Writing Modes Level 3 defines CSS support for various international writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and vertical (e.g. Asian scripts).

Text Flow

      article {
      	writing-mode: vertical-rl;
      }
    

CSS Writing Modes: Level 3

CSS Logical Properties and Values: Level 1

Размеры

Отступы

Позиционирование

      .absolute {
      	position: absolute;
      	inset-block-start: 0;
      	inset-inline-start: 0;
      }
    

CSS Logical Properties and Values: Level 1

      .mixer-color {
      	mix-blend-mode: multiply;
      }
    

      .wsd-logo {
      	mix-blend-mode: difference;
      }
    

Вычитает более темный из более светлого в контексте двух цветов

      .circle {
      	mix-blend-mode: screen;
      }
    

Несколько демок

• Ghosty text with mix-blend-mode/text-shadow
• Animated logo with CSS + mix-blend-mode
• Candy crash blend mode
• Dark Star Pinwheel
• CSS Parallax
• Fashion Visualisation with mix-blend-mode

CSS Scroll Snap Module: Level 1

      .container {
        scroll-snap-type: y mandatory;
      }
      

        .container section {
          scroll-snap-align: center;
        }
      
    

CSS Scroll snap Module: Level 1

CSS Typed Object Model: Level 1

        let el = document.querySelector('.el');
        el.style.opacity = 1
        console.log(el.style.opacity) // "1"
    

			let el = document.querySelector('.el');
      let styleMap = el.attributeStyleMap;
      styleMap.set('opacity', 1);
			console.log( styleMap.get('opacity') );
			// CSSUnitValue { value: 1, unit: "number" }
		

			el.style.transform = `translate(
				100%,
				calc( 100vw + 10px )
			)`;
		

			let styleMap  = document.querySelector('.el').attributeStyleMap;
			let calc      = new CSSMathSum( CSS.vw(100), CSS.px(10) );
			let transform = new CSSTransformValue(
				new CSSTranslate(
					CSS.percent(100),
					calc
				)
			);
			styleMap.set( 'transform', transform );
		

CSS.supports('display', 'contents');

true

			if ( window.CSS && CSS.number ) { 
				// CSS Typed OM
			}
		

CSS Typed Object Model

Полезные ссылки

• CSS clip-path maker — Bennett Feely
• CSS Shape example — Sam Bulatov
• Languages used on the Internet — Wikipedia

@_stylesam