index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>CSS Hacks Lab &ndash; a project of the Browser Bugs Working Group</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous" />
    <style>
.underline-links a {
  text-decoration: underline;
}
    </style>
  </head>
  <body>
    <div class="container">
      <h1>CSS Hacks Lab <small>a project of the <a href="http://browserbu.gs">Browser Bugs Working Group</a></small></h1>

      <h2 id="list-of-hacks">Hacks researched:</h2>
      <ul class="underline-links">
        <li>Pseudo-element hacks
          <ul>
            <li><a href="webkit-full-page-media/"><code>_::-webkit-full-page-media</code></a></li>
          </ul>
        </li>
        <li>Pseudo-class hacks
          <ul>
            <li><a href="webkit-full-screen/"><code>_:-webkit-full-screen</code></a></li>
          </ul>
        </li>
        <li>Media query hacks
          <ul>
            <li><a href="media-min-width-0-backslash-0/"><code>@media (min-width: 0\0)</code></a></li>
          </ul>
        </li>
        <li>Property value hacks
          <ul>
            <li>The <code>property: value\9;</code> family of hacks
              <ul>
                <li><a href="property-value-backslash-9/length/"><code>length-property: length\9;</code></a></li>
                <li><a href="property-value-backslash-9/background-color/"><code>background-color: color\9;</code></a></li>
              </ul>
            </li>
            <li>The <code>property: value&nbsp;\9;</code> <strong>(note the space)</strong> family of hacks
              <ul>
                <li><a href="property-value-space-backslash-9/length/"><code>length-property: length&nbsp;\9;</code></a></li>
                <li><a href="property-value-space-backslash-9/background-color/"><code>background-color: color&nbsp;\9;</code></a></li>
              </ul>
            </li>
            <li>The <code>property: value\0;</code> family of hacks
              <ul>
                <li><a href="property-value-backslash-0/length/"><code>length-property: length\0;</code></a></li>
                <li><a href="property-value-backslash-0/background-color/"><code>background-color: color\0;</code></a></li>
              </ul>
            </li>
            <li>The <code>property: value&nbsp;\0;</code> <strong>(note the space)</strong> family of hacks
              <ul>
                <li><a href="property-value-space-backslash-0/length/"><code>length-property: length&nbsp;\0;</code></a></li>
                <li><a href="property-value-space-backslash-0/background-color/"><code>background-color: color&nbsp;\0;</code></a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
      
      <h2 id="about">About</h2>
      <p>
        Due to the existence of <a href="http://browserbu.gs">bugs in browsers' rendering engines</a>, it is sometimes necessary to use CSS hacks to conditionally apply special styles only in specific browsers to mitigate such bugs.
        This <a href="https://github.com/browser-bugs/css-hacks">repository</a>/website houses research on some CSS hacks, including testcases and thorough compatibility test results.
        It is a project of the <a href="http://browserbu.gs">Browser Bugs Working Group</a>.
      </p>
      <p>
        For comparison, <a href="http://browserhacks.com">Browserhacks.com</a> covers a greater number of hacks, including JavaScript hacks too, but as of this writing unfortunately isn't very actively maintained, and the data for a few hacks is outdated.
        Particularly unfortunately, there is no easy way to ascertain how up-to-date the information on each hack is.
        In the meantime, CSS Hacks Lab aims to be an improvement in this regard by including clear "Last updated" datestamps and by being very explicit about what browser versions have and haven't been tested.
      </p>

      <footer class="text-center">
        <a href="https://github.com/browser-bugs/css-hacks">Contribute via GitHub</a> &middot;
        <a href="https://twitter.com/browser_bugs">@browser_bugs on Twitter</a><br />
        &copy; 2016 <a href="http://browserbu.gs">Browser Bugs Working Group</a>. Content dual-licensed under <a href="https://github.com/browser-bugs/css-hacks/blob/gh-pages/LICENSE-MIT.txt">MIT</a> &amp; <a href="https://github.com/browser-bugs/css-hacks/blob/gh-pages/LICENSE-CC-BY.txt">CC-BY-4.0</a>.<br />
        <a href="https://validator.w3.org/nu/?doc=http%3A%2F%2Fbrowserbu.gs%2Fcss-hacks%2F">Validate this HTML</a>
      </footer>
    </div>
    <script async src="ga.js"></script>
    <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/anchorjs/3.0.0/anchor.min.js" integrity="sha384-/u+jACBfKbiyZY8/EuEXH/XE/uihTXgvFlQs//rfYx3oNN5ZGi8O9VtikiuNBgAE"></script>
    <script src="anchors.js"></script>
  </body>
</html>