ffoodd

/**
 * :not(:any()) test
 */
 :not(:-webkit-matches(h1)) span { color: red; }
 :not(:-moz-matches(h1)) span { color: red; }
 :not(:matches(h1)) span { color: red; }
 
:not(:-webkit-any(h1)) span { color: red; }
:not(:-moz-any(h1)) span { color: red; }
:not(:any(h1)) span { color: red; }

ffoodd

/**
 * Background-clip text sur Edge ?
 */
 
 /**
  * Dans l'absolu, il ne faut que deux cas :
  ** Soit le navigateur comprend tout et affiche le texte avec le dégradé incrusté et un fond blanc ;
  ** Soit le navigateur ne comprend pas tout, et le texte apparaît en gris, sur fond blanc.
  * Or :
  ** Edge comprend tout !? C'est censé être -webkit-only ;

ffoodd

/**
 * Formulaire à cases
 */
*,
*::after,
*::before {
	box-sizing: border-box;
}

form {

ffoodd

/**
 * CSS gradient to fill inline SVG
 */

path {
	fill: linear-gradient(45deg, red, blue);
	stroke: linear-gradient(45deg, red, blue);
}

ffoodd

/**
 * button inlining
 ** http://thenewcode.com/461/What-The-Heck-Is-A-Replaced-Element
 *** en FR : https://la-cascade.io/quest-ce-quun-element-remplace/
 ** http://www.w3.org/TR/CSS21/conform.html#replaced-element
 ** http://reference.sitepoint.com/css/replacedelements
 */

button {
  display: inline;

ffoodd

/**
 * Soulignement factice
 ** Avec un petit délire :
 ** https://medium.com/@mwichary/system-shock-6b1dc6d6596f
 */
 
:root {
    font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
}

ffoodd

/**
 * Animation de Nico
 */

body {  background: #fff;  color: #000;  font-family: 'Open Sans', 'Times', sans-serif;}.aligncenter {text-align: center;}p {  font-size: 200%;}
.opquast_logo {  -webkit-animation-duration: 3s;          animation-duration: 3s;  -webkit-animation-name: oooooomooooonooooooopquaaaaaaaaaaast;          animation-name: oooooomooooonooooooopquaaaaaaaaaaast;  max-width: 100vw;  display: inline-block;  -webkit-font-smoothing: antialiased;}  @-webkit-keyframes oooooomooooonooooooopquaaaaaaaaaaast {    0% {      -webkit-transform: scale(0) rotateY(0) translate3d(0,0,0);              transform: scale(0) rotateY(0) translate3d(0,0,0);    }    80% {      -webkit-transform: scale(5) rotateY(720deg) translate3d(0,0,0);              transform: scale(5) rotateY(720deg) translate3d(0,0,0);    }    90% {      -webkit-transform: scale(15) rotateY(720deg) translate3d(0,0,0);              transform: scale(15) rotateY(720deg) translate3d(0,0,0);    }    100% {      -webkit-transform: scale(1) rotateY(72

ffoodd

High contrast mode detection Modernizr test

A simple test using Mondernizr.addTest() to detect wether user has high contrast mode activated. Tested with Windows' High contrast mode on Edge and Firefox, and also with Firefox customized theme for high contrast.

A Pen by ffoodd on CodePen.

License.

ffoodd

/**
 * Réserve dʼespace pour le contenu
 */
@keyframes placeholder {  
	from { 
		background-position: -10em 0; 
	} to { 
		background-position: 10em 0; 
	}
}

ffoodd

/**
 * Formulaire inversé, sans CSS
 */