Dimox

If you have ever accessibly styled a checkbox/radio button using the :checked pseudo-selector, you know that IE8- don't support it. We usually have two options: either a custom Modernizr test or either a conditional IE class.

There's a simpler way to detect it and it doesn't rely on anything external:

/* hide the default element only on browsers that support :checked */
input:checked, input:not(checked) {
    display: none;
}

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {

	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="v2p.js"></script>
	<style type="text/css" media="all">
	body { margin: 0; }
	div {
	background: #fa7098;
	}

	<?php
	/*
	* WordPress Breadcrumbs
	* author: Dimox
	* version: 2019.03.03
	* license: MIT
	*/
	function dimox_breadcrumbs() {

	/* === OPTIONS === */

	<body>
	<header>...</header>
	<main>...</main>
	<footer>...</footer>
	</body>