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.
![Facebook Open Graph META Tags]()
It's no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook "Like" and "Recommend" widgets on every website. One...
![Responsive and Infinitely Scalable JS Animations]()
Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...
![Flexbox Equal Height Columns]()
Flexbox was supposed to be the pot of gold at the long, long rainbow of insufficient CSS layout techniques. And the only disappointment I've experienced with flexbox is that browser vendors took so long to implement it. I can't also claim to have pushed flexbox's limits, but...
![Table Cell and Position Absolute]()
If you follow me on Twitter, you saw me rage about trying to make position: absolute work within a TD element or display: table-cell element. Chrome? Check. Internet Explorer? Check. Firefox? Ugh, FML. I tinkered in the console...and cussed. I did some researched...and I...
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 :)