CSS Supports

CSS

							CopyCopied!
							
@supports (mix-blend-mode: hue) {
	.wrapper {
		background: url(/assets/images/color-picker/color-pic.jpg) 0/cover;  
	    height: 300px;
	    width: 960px;
	    max-width: 100%;
	    position: relative;
	}
	.cpicker {
	    padding: 0;
	    border: none; 
	    position: absolute;
	    width: 100%; 
	    height: 100%;
	    mix-blend-mode: hue;
	    cursor: pointer;
	}

	::-webkit-color-swatch {
	    border: none;
	}

	::-webkit-color-swatch-wrapper {
	    padding: 0;
	}

	::-moz-color-swatch,
	::-moz-focus-inner {
	    border: none;
	}

	::-moz-focus-inner {
	    padding: 0;
	}
}

/* Stuff to do when the Browser does not support mix-blend-mode */
@supports not(mix-blend-mode: hue) {
	.wrapper:before {
		display: block;
		color: red;
		content: "**Your Browser does not suppprt mix-blend-mod for input type color!**";
		font-weight: bold;
		text-align: center;
		padding: 1em;
	}
	.cpicker {
		display: none;
	}
}