<commit_before><!DOCTYPE html>
<html lang="en">
<head>

	<!-- ***** prefetch ***** -->
	<meta http-equiv="x-dns-prefetch-control" content="on">
	<link rel="dns-prefetch" href="//www.google-analytics.com">

	<!-- ***** charset ***** -->
	<meta charset="utf-8">

	<!-- ***** robots ***** -->
	<meta name="robots" content="noydir">
	<meta name="robots" content="noodp">
	<meta name="robots" content="index, follow">
	<link rel="canonical" href="https://style-validator.io/">
	<link rel="alternate" href="https://style-validator.io/" hreflang="en" />

	<!-- ***** viewport ***** -->
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

	<!-- ***** format-detection ***** -->
	<meta name="format-detection" content="telephone=no, email=no, address=no">

	<!-- ***** data ***** -->
	<title>Style Validator - A Next CSS Validator</title>
	<meta name="description" content="A Next CSS Validator that checks combination of styles and elements.">
	<meta name="keywords" content="Style,Validator,CSS, Stylesheet, Inspector, Devtools, Chrome, Extension, Addon">

	<!-- ***** ogp ***** -->
	<meta property="og:site_name" content="Style Validator">
	<meta property="og:title" content="Style Validator - A Next CSS Validator">
	<meta property="og:type" content="website">
	<meta property="og:url" content="https://style-validator.io/">
	<meta property="og:description" content="A Next CSS Validator that checks combination of styles and elements.">
	<meta property="og:image" content="https://style-validator.io/img/style-validator.logo.png">

	<!-- ***** favicon ***** -->
	<link rel="icon" type="image/x-icon" href="/extension/favicon.ico?v=1">
	<link rel="shortcut icon" type="image/x-icon" href="/extension/favicon.ico?v=1">

	<!-- ***** app icon ***** -->
	<link rel="apple-touch-icon" href="/extension/style-validator.logo.png">
	<meta name="apple-mobile-web-app-title" content="Style Validator">
	<meta name="application-name" content="Style Validator">

	<!-- ***** app icon (for ms app)***** -->
	<meta name="msapplication-TileColor" content="#F0F8FF">
	<meta name="msapplication-TileImage" content="/img/ms-style-validator.logo.png">
	<meta name="theme-color" content="#52B050">

	<!-- ***** styles ***** -->
	<link rel="stylesheet" href="/extension/common.css">
	<link rel="stylesheet" href="/page/common.css">
	<link rel="stylesheet" href="/page/index.css">

	<!-- ***** imports ***** -->
	<script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
	<link rel="import" href="/dom_modules/header.html">
	<link rel="import" href="/dom_modules/footer.html">
	<link rel="import" href="/dom_modules/slide-share.html">
	<link rel="import" href="/dom_modules/jsonld.html">

	<!-- ***** scripts ***** -->
	<script>
		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
				m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

		ga('create', 'UA-53227157-3', 'auto');
		ga('send', 'pageview');

	</script>
</head>
<body>
<div class="wrapper">
	<common-header></common-header>
	<main class="main">
		<figure class="kv content-width">
			<div class="kv-logo" id="vivus-kv-logo"><!--<img src="/img/style-validator.logo.nopadding.svg" class="kv-logo-image"/>--></div>
			<figcaption class="kv-caption">
				<div class="kv-header">
					<h2 class="kv-heading">CSS Validation <span>in the Browser</span></h2>
				</div>
				<div class="kv-body">
					<p class="kv-body-p">
						A Next CSS Validator that checks combination of styles and elements.
					</p>

					<ul class="kv-buttons-list">
						<li>
							<a href="https://chrome.google.com/webstore/detail/style-validator/aaeahhnjkelemfcdmkcpaggdhfaffeod" target="_blank" onclick="ga('send', 'event', 'button', 'click', 'Chrome Web Store Link');">
								<figure class="kv-buttons-wrapper">
									<h3 class="kv-buttons-heading">Chrome Extension</h3>
									<div class="kv-buttons-image-wrapper">
										<img src="/img/chromeWebStore.png">
									</div>
									<figcaption class="kv-buttons-caption">
										<ul class="browser-support">
											<li><img src="/img/chrome_128x128.png"></li>
										</ul>
									</figcaption>
								</figure>
							</a>
						</li>
						<li>
							<a id="bookmarklet" href="/bookmarklet/style-validator.js" onclick="ga('send', 'event', 'button', 'click', 'JavaScript Bookmarklet');">
								<figure class="kv-buttons-wrapper">
									<h3 class="kv-buttons-heading">JavaScript Bookmarklet</h3>
									<div class="kv-buttons-image-wrapper">
										<img src="/img/bookmarkbar.png" width="206">
									</div>
									<figcaption class="kv-buttons-caption">
										<ul class="browser-support">
											<li><img src="/img/chrome_128x128.png"></li>
											<li><img src="/img/opera_128x128.png"></li>
											<li class="disabled"><img src="/img/firefox_128x128.png"></li>
											<li class="disabled"><img src="/img/safari_128x128.png"></li>
											<li class="disabled"><img src="/img/internet-explorer_128x128.png"></li>
											<li class="disabled"><img src="/img/edge_128x128.png"></li>
										</ul>
									</figcaption>
								</figure>
							</a>
						</li>
					</ul>

					<section class="section-validate">
						<div class="section-validate-header">
							<h3 class="section-validate-heading">Online Validator (still in development)</h3>
							<ul class="browser-support">
								<li><img src="/img/chrome_128x128.png"></li>
								<li class="disabled"><img src="/img/opera_128x128.png"></li>
								<li class="disabled"><img src="/img/firefox_128x128.png"></li>
								<li class="disabled"><img src="/img/safari_128x128.png"></li>
								<li class="disabled"><img src="/img/internet-explorer_128x128.png"></li>
								<li class="disabled"><img src="/img/edge_128x128.png"></li>
							</ul>
						</div>
						<div class="section-validate-body">
							<form class="section-validate-form" id="validation-form">
								<input type="text" name="url" placeholder="Input URL of Web Page" class="section-validate-input" id="validation-input" required="required" />
								<button type="submit" class="section-validate-button" id="validation-button">Validate</button>
							</form>
						</div>
					</section>
				</div>
			</figcaption>
		</figure>

		<section class="section section-video">
			<div class="section-inner content-width">
				<div class="section-header">
					<h3 class="section-heading">Chrome Extension</h3>
				</div>
				<div class="section-body">
					<!--<video class="section-video-tag" src="/video/style-validator.m4v" poster="/video/style-validator.jpg" autoplay loop></video>-->
					<img class="section-gif-animation" src="/gif_animations/demo.gif" alt="Demo Video" />
				</div>
			</div>
		</section>

		<section class="section section-rules">
			<div class="section-inner content-width">
				<div class="section-header">
					<h3 class="section-heading">Rule Editor</h3>
					<p class="section-description">If you want to edit default rule, use rule editor page like below.</p>
				</div>
				<div class="section-body">
					<dl class="section-rules-steps">
						<dt>Click RuleID(e.g. Rule-2) or go to options page of extension</dt>
						<dd><img class="section-gif-animation" src="/img/screenshot-console.png" alt="Console" /></dd>
						<dt>Edit Rules or Make Your Presets(shareable)</dt><commit_msg>removed online validator from toppage<commit_after><!DOCTYPE html>
<html lang="en">
<head>

	<!-- ***** prefetch ***** -->
	<meta http-equiv="x-dns-prefetch-control" content="on">
	<link rel="dns-prefetch" href="//www.google-analytics.com">

	<!-- ***** charset ***** -->
	<meta charset="utf-8">

	<!-- ***** robots ***** -->
	<meta name="robots" content="noydir">
	<meta name="robots" content="noodp">
	<meta name="robots" content="index, follow">
	<link rel="canonical" href="https://style-validator.io/">
	<link rel="alternate" href="https://style-validator.io/" hreflang="en" />

	<!-- ***** viewport ***** -->
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

	<!-- ***** format-detection ***** -->
	<meta name="format-detection" content="telephone=no, email=no, address=no">

	<!-- ***** data ***** -->
	<title>Style Validator - A Next CSS Validator</title>
	<meta name="description" content="A Next CSS Validator that checks combination of styles and elements.">
	<meta name="keywords" content="Style,Validator,CSS, Stylesheet, Inspector, Devtools, Chrome, Extension, Addon">

	<!-- ***** ogp ***** -->
	<meta property="og:site_name" content="Style Validator">
	<meta property="og:title" content="Style Validator - A Next CSS Validator">
	<meta property="og:type" content="website">
	<meta property="og:url" content="https://style-validator.io/">
	<meta property="og:description" content="A Next CSS Validator that checks combination of styles and elements.">
	<meta property="og:image" content="https://style-validator.io/img/style-validator.logo.png">

	<!-- ***** favicon ***** -->
	<link rel="icon" type="image/x-icon" href="/extension/favicon.ico?v=1">
	<link rel="shortcut icon" type="image/x-icon" href="/extension/favicon.ico?v=1">

	<!-- ***** app icon ***** -->
	<link rel="apple-touch-icon" href="/extension/style-validator.logo.png">
	<meta name="apple-mobile-web-app-title" content="Style Validator">
	<meta name="application-name" content="Style Validator">

	<!-- ***** app icon (for ms app)***** -->
	<meta name="msapplication-TileColor" content="#F0F8FF">
	<meta name="msapplication-TileImage" content="/img/ms-style-validator.logo.png">
	<meta name="theme-color" content="#52B050">

	<!-- ***** styles ***** -->
	<link rel="stylesheet" href="/extension/common.css">
	<link rel="stylesheet" href="/page/common.css">
	<link rel="stylesheet" href="/page/index.css">

	<!-- ***** imports ***** -->
	<script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
	<link rel="import" href="/dom_modules/header.html">
	<link rel="import" href="/dom_modules/footer.html">
	<link rel="import" href="/dom_modules/slide-share.html">
	<link rel="import" href="/dom_modules/jsonld.html">

	<!-- ***** scripts ***** -->
	<script>
		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
				m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

		ga('create', 'UA-53227157-3', 'auto');
		ga('send', 'pageview');

	</script>
</head>
<body>
<div class="wrapper">
	<common-header></common-header>
	<main class="main">
		<figure class="kv content-width">
			<div class="kv-logo" id="vivus-kv-logo"><!--<img src="/img/style-validator.logo.nopadding.svg" class="kv-logo-image"/>--></div>
			<figcaption class="kv-caption">
				<div class="kv-header">
					<h2 class="kv-heading">CSS Validation <span>in the Browser</span></h2>
				</div>
				<div class="kv-body">
					<p class="kv-body-p">
						A Next CSS Validator that checks combination of styles and elements.
					</p>

					<ul class="kv-buttons-list">
						<li>
							<a href="https://chrome.google.com/webstore/detail/style-validator/aaeahhnjkelemfcdmkcpaggdhfaffeod" target="_blank" onclick="ga('send', 'event', 'button', 'click', 'Chrome Web Store Link');">
								<figure class="kv-buttons-wrapper">
									<h3 class="kv-buttons-heading">Chrome Extension</h3>
									<div class="kv-buttons-image-wrapper">
										<img src="/img/chromeWebStore.png">
									</div>
									<figcaption class="kv-buttons-caption">
										<ul class="browser-support">
											<li><img src="/img/chrome_128x128.png"></li>
										</ul>
									</figcaption>
								</figure>
							</a>
						</li>
						<li>
							<a id="bookmarklet" href="/bookmarklet/style-validator.js" onclick="ga('send', 'event', 'button', 'click', 'JavaScript Bookmarklet');">
								<figure class="kv-buttons-wrapper">
									<h3 class="kv-buttons-heading">JavaScript Bookmarklet</h3>
									<div class="kv-buttons-image-wrapper">
										<img src="/img/bookmarkbar.png" width="206">
									</div>
									<figcaption class="kv-buttons-caption">
										<ul class="browser-support">
											<li><img src="/img/chrome_128x128.png"></li>
											<li><img src="/img/opera_128x128.png"></li>
											<li class="disabled"><img src="/img/firefox_128x128.png"></li>
											<li class="disabled"><img src="/img/safari_128x128.png"></li>
											<li class="disabled"><img src="/img/internet-explorer_128x128.png"></li>
											<li class="disabled"><img src="/img/edge_128x128.png"></li>
										</ul>
									</figcaption>
								</figure>
							</a>
						</li>
					</ul>

					<!--<section class="section-validate">
						<div class="section-validate-header">
							<h3 class="section-validate-heading">Online Validator (still in development)</h3>
							<ul class="browser-support">
								<li><img src="/img/chrome_128x128.png"></li>
								<li class="disabled"><img src="/img/opera_128x128.png"></li>
								<li class="disabled"><img src="/img/firefox_128x128.png"></li>
								<li class="disabled"><img src="/img/safari_128x128.png"></li>
								<li class="disabled"><img src="/img/internet-explorer_128x128.png"></li>
								<li class="disabled"><img src="/img/edge_128x128.png"></li>
							</ul>
						</div>
						<div class="section-validate-body">
							<form class="section-validate-form" id="validation-form">
								<input type="text" name="url" placeholder="Input URL of Web Page" class="section-validate-input" id="validation-input" required="required" />
								<button type="submit" class="section-validate-button" id="validation-button">Validate</button>
							</form>
						</div>
					</section>-->
				</div>
			</figcaption>
		</figure>

		<section class="section section-video">
			<div class="section-inner content-width">
				<div class="section-header">
					<h3 class="section-heading">Chrome Extension</h3>
				</div>
				<div class="section-body">
					<!--<video class="section-video-tag" src="/video/style-validator.m4v" poster="/video/style-validator.jpg" autoplay loop></video>-->
					<img class="section-gif-animation" src="/gif_animations/demo.gif" alt="Demo Video" />
				</div>
			</div>
		</section>

		<section class="section section-rules">
			<div class="section-inner content-width">
				<div class="section-header">
					<h3 class="section-heading">Rule Editor</h3>
					<p class="section-description">If you want to edit default rule, use rule editor page like below.</p>
				</div>
				<div class="section-body">
					<dl class="section-rules-steps">
						<dt>Click RuleID(e.g. Rule-2) or go to options page of extension</dt>
						<dd><img class="section-gif-animation" src="/img/screenshot-console.png" alt="Console" /></dd>
						<dt>Edit Rules or Make Your Presets(shareable)</dt>
{'fraction_non_alphanumeric': 0.21299782048741828, 'fraction_numerical': 0.01571890892279242, 'mean_word_length': 3.7571473452717563, 'pattern_counts': {'":': 0, '<': 396, '<?xml version=': 0, '>': 396, 'https://': 10, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6366815', 'n_tokens_mistral': 6217, 'n_tokens_neox': 4968, 'n_words': 891}