WebKit

https://webkit.org/
Admin
WebKit is an open source web browser engine that renders HTML and CSS, powers Safari and other...
Tokens:1,270,691
Snippets:12,063
Trust Score:9.9
Update:1 week ago
Show doc for...
Tokens:
Raw
### Example B: Option 3 - Non-letter start

Source: https://webkit.org/blog/13607/help-choose-from-options-for-css-nesting-syntax

Option 3 with nested rules starting with .bar and & p.

```css
.foo {
  color: red;
  .bar {
    color: blue;
  }
  & p {
    color: yellow;
  }
}

```

--------------------------------

### Run build-webkit with --help option

Source: https://webkit.org/building-webkit/script-tools

Run the build-webkit script with the --help option to display help information.

```bash
WebKit/Tools/Scripts/build-webkit --help

```

--------------------------------

### Example A: Option 3 - Non-letter start

Source: https://webkit.org/blog/13607/help-choose-from-options-for-css-nesting-syntax

Option 3 allows nested style rules directly in the declaration block, but they cannot start with a letter. Here the nested rule starts with &.

```css
article {
  font-family: avenir;
  & aside {
    font-size: 1rem;
  }
}

```

--------------------------------

### Creating a directory or a file with getFileHandle and getDirectoryHandle

Source: https://webkit.org/blog/12257/the-file-system-access-api-with-origin-private-file-system

Shows how to create or access a file and a directory under the root directory using getFileHandle() and getDirectoryHandle() with the 'create' option. The example also demonstrates that calling getFileHandle() without 'create' returns the existing entry.

```javascript
// Create a file named *Untiled.txt* under root directory.
const untitledFile = await root.getFileHandle("Untitled.txt", { "create" : true });
// Get access to existing *Untitled.txt* file.
// untitledFile and existingUntitledFile point to the same entry.
const existingUntitledFile = await root.getFileHandle("Untitled.txt");
// Create a directory named *Diary Folder*.
const diaryDirectory = await root.getDirectoryHandle("Diary Folder", { "create" : true });
```

--------------------------------

### Streaming demo with MediaSource and source buffer

Source: https://webkit.org/blog/15036/how-to-use-media-source-extensions-with-airplay

Demonstrates loading a video segment via fetch, appending it to a SourceBuffer, and handling the sourceopen event. Includes a check for onstartstreaming to support MMS.

```javascript
document.onload = async () => {
  if (!MediaSource.isTypeSupported(mediaType)) {
    return console.log('Media type is not supported.');
  }

  await new Promise((resolve) => {
    source.addEventListener("sourceopen", resolve, { once: true });
    document.body.appendChild(video);
  });

  const sourceBuffer = source.addSourceBuffer(mediaType);

  async function loadSegment() {
    const response = await fetch(videoURL);
    const buffer = await response.arrayBuffer();
    await new Promise((resolve) => {
      sourceBuffer.addEventListener("updateend", resolve, { once: true });
      sourceBuffer.appendBuffer(buffer);
    });
  }

  if (typeof(source.onstartstreaming) !== 'undefined') {
    source.onstartstreaming = async () => {
      loadSegment();
    };
  } else loadSegment();
});

```

--------------------------------

### Basic header HTML for border example

Source: https://webkit.org/blog/16214/get-creative-with-fancy-borders

Creates a basic header with a heading, used as the starting point for the border styling examples.

```HTML
<header>
  <h1>Woodworking</h1>
</header>
```

--------------------------------

### Basic header HTML for background-clip border-area example

Source: https://webkit.org/blog/16214/background-clip-border-area

Creates a basic header element with an h1 heading, used as the starting point for the border-area example.

```html
<header>
  <h1>Woodworking</h1>
</header>

```

--------------------------------

### Nested version using .component &

Source: https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview

Shows how to nest the previous example using .component & to place the parent selector.

```css
ul {
  padding-left: 1em;
  .component & {
    padding-left: 0;
  }
}

```

--------------------------------

### Example F: Option 5 nesting with @nest and media query

Source: https://webkit.org/blog/13607/help-choose-from-options-for-css-nesting-syntax

Option 5 syntax nesting lists and a media query using @nest and &.

```css
@nest ol, ul {
  & {
    padding-left: 1em;
  }
  @media (max-width: 30em){
    .type & {
      padding-left: 0;
    }
  }
}
```

--------------------------------

### Example C: Option 3 - Non-letter start

Source: https://webkit.org/blog/13607/help-choose-from-options-for-css-nesting-syntax

Option 3 for re-nesting inside an element selector. Uses :is(aside) & to start with a symbol instead of a letter.

```css
a:hover {
  color: hotpink;
  :is(aside) & {
    color: red;
  }
}

```

--------------------------------

### @starting-style example for transitioning background-color

Source: https://webkit.org/blog/14955/the-web-just-gets-better-with-interop

Defines starting values for an element's transition. In this example, the background-color transitions from transparent to green when the element is appended to the document.

```css
.alert {
  transition: background-color 2s;
  background-color: green;
  @starting-style {
    background-color: transparent;
  }
}

```

--------------------------------

### Run WebKit App with run-webkit-app

Source: https://webkit.org/building-webkit/running-webkit

Launches a specified app with your build products by setting DYLD_FRAMEWORK_PATH. Takes an application name or path as an argument.

```bash
run-webkit-app [Example]
```

--------------------------------

### Example F: Option 3 nesting with media query

Source: https://webkit.org/blog/13607/help-choose-from-options-for-css-nesting-syntax

Option 3 syntax nesting lists and a media query using &.

```css
ol, ul {
  padding-left: 1em;
  @media (max-width: 30em){
    .type & {
      padding-left: 0;
    }
  }
}
```

--------------------------------

### Class name with InterCaps (C++)

Source: https://webkit.org/blog/25/webkit-coding-style-guidelines

Class names should start with a capital letter and use InterCaps. This example shows the correct form.

```cpp
class MyImportantClass;

```

--------------------------------

### Demo HTML for contrast-color()

Source: https://webkit.org/blog/16929/contrast-color

HTML structure for the demo, including a color picker, a button, and a dialog warning for unsupported browsers.

```HTML
<main>
  <header>
    <label>Button color: 
      <input type="color" colorspace="display-p3"
             id="color-picker" 
             value="purple">			 	
    </label>
  </header>

  <button>This is a button</button>
<!--   <small>The button color is determined by the color picker, while the browser chooses either white or black for text color — whichever provides more contrast.</small> -->

  <dialog open class="support-warning">This browser does not support <code>contrast-color()</code>. Try this demo in a browser that does, like Safari Technology Preview.</dialog>
</main>

```

--------------------------------

### Objective-C block spacing (Right)

Source: https://webkit.org/bug-life-cycle/code-style-guidelines

In Objective-C, do not place spaces between the start of a block and its arguments, or the start of a block and its opening brace. Do place a space between argument lists and the opening brace. Examples show `block = ^{ ... };` and `block = ^(int, int) { ... };`.

```objectivec
block = ^{
...
};

block = ^(int, int) {
...
};

```

--------------------------------

### Example D: Option 3 - Non-letter start

Source: https://webkit.org/blog/13607/help-choose-from-options-for-css-nesting-syntax

Option 3 for zero unnested declarations and various selectors. Uses & h2 and :is(a&) to handle parent references.

```css
:has(img) {
  .product {
    margin-left: 1rem;
  }
  & h2 {
    font-size: 1.2rem;
  }
  > h3 {
    font-size: 1rem;
  }
  &:hover {
    box-shadow: 10px 10px;
  }
  :is(a&) {
    border: none;
  }
}

```
Tokens:
Raw