<div class="container p-5"> <section class="mb-5"> <h1 class="mb-4"> CSS-only double-click </h1> <p> Did you know it was possible to mimic the double-click behaviour in CSS? The only ingredients you need are some <code><a></code> tags that block the first click. </p> <p> I've used <code><a></code> tags with a <code>tabindex</code> because these where the only elements that are stylable in all browsers. Thanks <a href="https://twitter.com/cvrebert" target="_blank">Chris Rebert</a> for the reseach about <a href="https://gist.github.com/cvrebert/68659d0333a578d75372" target="_blank">click and focus behavior across browsers & OSes</a>. The <code>href</code> is removed to prevent navigation or page jumps (with #-links). </p> <p> As Don Caviness <a href="https://twitter.com/gis_golfer/status/1025513187767209985">pointed out</a>, Edge seem to behave a bit strange. It only works if you click - move the cursor a bit - and click again. </p> <p> If you want to find out how it works, you can set <code>$debug: true;</code> to enable debug mode. </p> <p class="alert alert-warning mb-4" role="alert"> <strong>WARNING</strong>: this is just a demostration to show it's possible to use CSS for double-clicks. This technique has some accessibility issues (<a href="https://twitter.com/aardrian/status/1026518977676234752" target="_blank">see this tweet</a>). I woudn't recommend to use this. If you do want to use double-click, use <a href="https://www.w3schools.com/jsref/event_ondblclick.asp" target="_blank">javascript</a>. </p> </section> <section class="my-5"> <h2> 1. Double-click link </h2> <p> This <span class="doubleclick"> <a href="https://www.google.com" target="_blank">link to google</a> <a tabindex="0" aria-hidden="true" class="doubleclick__layer doubleclick__layer-1"></a> <a tabindex="0" aria-hidden="true" class="doubleclick__layer doubleclick__layer-2"></a> </span> can only be opened by double clicking it. </p> </section> <section class="my-5"> <h2> 2. Double-click video </h2> <p> Double-click to play or pause the video. </p> <div class="doubleclick embed-responsive embed-responsive-16by9"> <video controls="controls" width="640" height="360"> <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" /> <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" /> <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" /> </video> <a tabindex="0" aria-hidden="true" class="doubleclick__layer doubleclick__layer-1"></a> <a tabindex="0" aria-hidden="true" class="doubleclick__layer doubleclick__layer-2"></a> </div> <p class="mb-0 mt-2 small"> Thanks <a href="https://gist.github.com/amineatallah/2469536" target="_blank">Amine Atallah</a> for providing this hosted video. </p> </section> <section class="my-5"> <h2> 3. Double-click youtube video </h2> <p> Double-click to play or pause the video. I've disabled the fullscreen mode, but if you enable this, the video will open fullscreen when you doubleclick it. Add the <code>allowfullscreen</code> attribute in this codepen to see this in action. </p> <div class="doubleclick embed-responsive embed-responsive-16by9"> <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="autoplay; encrypted-media"></iframe> <a tabindex="0" aria-hidden="true" class="doubleclick__layer doubleclick__layer-1"></a> <a tabindex="0" aria-hidden="true" class="doubleclick__layer doubleclick__layer-2"></a> </div> </section> <section class="my-5"> <h2> 4. Double-click to change text color of another element </h2> <p> This example may look very familiar if you've seen my pen with <a href="https://codepen.io/MartijnCuppens/pen/MBjqbM?editors=1100" target="_blank">stuff you can do with CSS pointer events</a>, but this example doesn't use the <code>pointer-events</code> property but the <code>:focus-within</code> pseudo class. Not supported in IE & Edge at this moment (<a href="https://caniuse.com/#feat=css-focus-within" target="_blank">view supported browsers</a>). </p> <div class="doubleclick"> <div class="d-flex flex-wrap focus-within"> <div class="card mb-3 mr-3"> <img class="card-img-top" height="180" width="286" alt="100%x180" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164b14928b4%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164b14928b4%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.203125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"> <div class="card-body"> <h5 class="h6 card-title">Card 1</h5> <a tabindex="0" class="btn btn-primary js-btn"> Double-click me </a> </div> </div> <div class="card mb-3 mr-3"> <img class="card-img-top" height="180" width="286" alt="100%x180" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164b14928b4%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164b14928b4%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.203125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"> <div class="card-body"> <h5 class="h6 card-title">Card 2</h5> <p class="card-text element">This text changes color if the button in card 1 is double-clicked.</p> </div> </div> </div> <a tabindex="0" aria-hidden="true" class="doubleclick__layer doubleclick__layer-1"></a> <a tabindex="0" aria-hidden="true" class="doubleclick__layer doubleclick__layer-2"></a> </div> </section> <section class="mt-5"> <h2> That's all folks! </h2> <p> xoxo,<br> <a href="https://twitter.com/Martijn_Cuppens" target="_blank">@Martijn_Cuppens</a> </p> <p class="small mt-4"> PS. make sure to check out <a href="https://github.com/project-rfs/rfs" target="_blank">RFS</a> to control your responsive font sizes. </p> </section> </div>

!