Ian Kilpatrick bfgeek

## extending-position-absolute-fixed.md

      
              1 file
            
          
              0 forks
            
          
              1 comment
            
          
              0 stars
            
          
                bfgeek
                / extending-position-absolute-fixed.md
            
            
              Last active
              May 26, 2022 06:47
            
              
                extending-position-absolute-fixed.md
              
          
    Introduction

This describes an extension to position: absolute / position: fixed which could be used to "anchor" an absolute/fixed element to another element in the DOM.
Background

Positioned absolute/fixed is a relatively powerful layout mode, as a refresher:


## Blink -webkit-box changes.md

      
              1 file
            
          
              0 forks
            
          
              1 comment
            
          
              0 stars
            
          
                bfgeek
                / Blink -webkit-box changes.md
            
            
              Last active
              March 9, 2020 18:15
            
          
    Blink -webkit-box changes

Ian Kilpatrick - March 2020
Introduction

display: -webkit-box was initially created in WebKit as a precursor to display: flex. It is very similar to flexbox such that it is used as a fallback for browsers which don't support flexbox. E.g.

  
## masonary.js
/**
 * Copyright 2018 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *     http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and

## test-typed-props.html
<style>
body {
 --foo: red;
 --foo: green;
 --bar: red;
 --bar: 42;
 --quix: 42;
 --quix: red;
}
</style>

## border-colors.js
registerPaint('border-colors', class {
  static get inputProperties() {
    return [
      '--border-top-width',
      '--border-right-width',
      '--border-bottom-width',
      '--border-left-width',
      '--border-top-color',
      '--border-right-color',
      '--border-bottom-color',

## script-efffect.js
new Animation(new ScriptEffect('spring', {
  'expand': [elem1],
  'shrink': [elem2],
}, [
  document.timeline,
  new ScrollTimeline(scrollElem),
])).play();

## hello.js
console.log('hello world.');

## worklets.html
<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Worklets Level 1</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="ED" name="w3c-status">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED" rel="stylesheet" type="text/css">
  <meta content="Bikeshed version 81c00a31d8c468599cf8337dd150a8be9a2b4e5d" name="generator">

## worklets-script-tags.html

<script worklet="paint" src="paint.js"></script>
<!--
  This makes the script a type="module" and has similar loading behaviour, e.g.
  if async is present it will not wait until the whole document is parsed to begin
  executing, if not - it waits until the whole document is parsed to being executing
  on worklets.
-->

<script worklet="paint">

## tasklets.js
api = await remote {
  import B from 'b.js';
  export class A {
    constructor() { this.b = new B(); }
  }
  export function thing() {

  }
}
	/**
	* Copyright 2018 Google Inc. All Rights Reserved.
	* Licensed under the Apache License, Version 2.0 (the "License");
	* you may not use this file except in compliance with the License.
	* You may obtain a copy of the License at
	* http://www.apache.org/licenses/LICENSE-2.0
	* Unless required by applicable law or agreed to in writing, software
	* distributed under the License is distributed on an "AS IS" BASIS,
	* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	* See the License for the specific language governing permissions and
	<style>
	body {
	--foo: red;
	--foo: green;
	--bar: red;
	--bar: 42;
	--quix: 42;
	--quix: red;
	}
	</style>
	registerPaint('border-colors', class {
	static get inputProperties() {
	return [
	'--border-top-width',
	'--border-right-width',
	'--border-bottom-width',
	'--border-left-width',
	'--border-top-color',
	'--border-right-color',
	'--border-bottom-color',
	new Animation(new ScriptEffect('spring', {
	'expand': [elem1],
	'shrink': [elem2],
	}, [
	document.timeline,
	new ScrollTimeline(scrollElem),
	])).play();
	<!doctype html><html lang="en">
	<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
	<title>Worklets Level 1</title>
	<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
	<meta content="ED" name="w3c-status">
	<link href="../default.css" rel="stylesheet" type="text/css">
	<link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
	<link href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED" rel="stylesheet" type="text/css">
	<meta content="Bikeshed version 81c00a31d8c468599cf8337dd150a8be9a2b4e5d" name="generator">

	<script worklet="paint" src="paint.js"></script>
	<!--
	This makes the script a type="module" and has similar loading behaviour, e.g.
	if async is present it will not wait until the whole document is parsed to begin
	executing, if not - it waits until the whole document is parsed to being executing
	on worklets.
	-->

	<script worklet="paint">
	api = await remote {
	import B from 'b.js';
	export class A {
	constructor() { this.b = new B(); }
	}
	export function thing() {

	}
	}