Patrick Brosset captainbrosset

Having to support specific browsers.
Avoiding or removing a feature that doesn’t work across browsers.
Making a design look/work the same across browsers.
Achieving visual precision on stylized elements (e.g., buttons).
Lack of capabilities to implement specific use cases.
Making web sites/applications accessible.
Making web sites/applications performant.
Making web sites/applications secure.
Using web technologies in a native or hybrid context (e.g, using WebViews, Electron, CEF).
Working with different tracking protection and data storage policies in browsers.

	@media (-ms-high-contrast: active) {
	/* Your general contrast theme styles */
	}

	@media (-ms-high-contrast: black-on-white) {
	/* Your specific light contrast theme styles */
	}

	@media (-ms-high-contrast: white-on-black) {
	/* Your specific dark contrast theme styles */

	@media (-ms-high-contrast: active), (forced-colors: active) {
	/* Your general contrast theme styles */
	}

	@media (-ms-high-contrast: black-on-white), (forced-colors: active) and (prefers-color-scheme: light) {
	/* Your specific light contrast theme styles */
	}

	@media (-ms-high-contrast: white-on-black), (forced-colors: active) and (prefers-color-scheme: dark) {
	/* Your specific dark contrast theme styles */

	function logMutation(mutation) {
	console.log(mutation);
	}

	const mutationObserver = new MutationObserver((mutations) => {
	for (const mutation of mutations) {
	// Build a reason object that will let the user know what exactly happened
	let details = null;
	if (mutation.type === "attributes") {
	details = {

	<!DOCTYPE html>
	<meta charset="utf8">
	<style>
	html {
	font-family: consolas, monospace;
	font-size: 16px;
	}

	ul, li {
	padding: 0;

	// This is our mask element, a 100%/100% semi-transparent
	// element sitting on the whole UI.
	const mask = ...;

	// Start defining a path used to clip the mask.
	// First, go around the outer perimeter.
	const polygon = ['0 0', '100% 0', '100% 100%', '0 100%', '0 0'];

	// And then clip away the highlighted areas from the mask.
	// To do this, we go around their shapes, in reverse direction.

	// Get the first segment's start point.
	const points = [segments[0].start];

	// And append the end point of each segment, one by one, after that.
	for (const segment of segments) {
	if (!segment) {
	continue;
	}
	points.push(segment.end);
	}