Offscreen Text for Copy & Paste
The relationship between HTML and CSS is special: mixing content via HTML with presentation from CSS to make an awesome presentation. Sometimes, however, you need to employ CSS tricks solely to enhance functionality. This could be one of those cases.
When browsing through the Firefox DevTools console code, I noticed a really clever technique for hiding text on screen but making sure it's present during a copy + paste. Here's the technique:
<p>Jenny don't change your number <span class="copy-only">8675309</span></p>
.copy-only {
display: block;
position: absolute;
left: -9999999px;
top: -9999999px;
}
With the CSS above, the screen displays "Jenny don't change your number" while copying that line would result in "Jenny don't change your number 8675309".
When you plant the text offscreen via CSS, it's still copied to the clipboard when the user does a copy operation. You're essentially picking and choosing what gets copied, which can be very valuable if you expect users to copy your content.
![Write Simple, Elegant and Maintainable Media Queries with Sass]()
I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...
![Creating Scrolling Parallax Effects with CSS]()
Introduction
For quite a long time now websites with the so called "parallax" effect have been really popular.
In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...
![Basic AJAX Requests Using MooTools 1.2]()
AJAX has become a huge part of the modern web and that wont change in the foreseeable future. MooTools has made AJAX so simple that a rookie developer can get their dynamic pages working in no time.
Step 1: The XHTML
Here we define two links...
![Upload Photos to Flickr with PHP]()
I have a bit of an obsession with uploading photos to different services thanks to Instagram. Instagram's iPhone app allows me to take photos and quickly filter them; once photo tinkering is complete, I can upload the photo to Instagram, Twitter, Facebook, and...
Very nice, gotta love those little CSS tweaks.
Small caveat, only works if the user double-clicks on line to select, won’t if it’s a “click-hold on first letter and drag cursor” kind of copy
Does it work in all browsers? It’s very easy to use and simple, but I’m concerned that it could be too simple to work in every browser.
These simple and small tweaks help a long way in designing. Thanks a lot for sharing :)