How does gmail preserve copy and pasted web content, maintaining the attached CSS?


Tags: html,css,google-chrome,web,gmail

Problem :

I'm not sure how long the feature has been active, but I've just realized that I can copy and paste nearly any web content into a message on gmail and it will preserve it perfectly-- zero transcription errors. The images, formatting, and all-around CSS are perfectly preserved.

Yet if you paste the same thing into a textbox, of course it gets converted to some sort of plaintext.

I'm trying to figure out how this is possible. How can gmail know the styling for the web content? How can it know where it came from?

This is happening in Chrome, by the way. I don't even know if this is a feature of the browser, the email provider, or a combination thereof.



Solution :

It is a combination of OS, the source application from which you are copying, and the destination application to which you are pasting.

The source application should permit selection and copying of rich information.

The OS cut/paste functionality needs to understand what the rich content is.

The destination application needs to understand what the rich content is and how to handle it.

When you cut paste HTML page information, CSS is not copy pasted. The information displayed on the screen is copied as rich content and then pasted onto destination system.

Gmail 'understands' how to interpret, correctly, the information pasted into it. A text program also understand how to interpret the information - it knows that it should discard e.g. all images.

MS Word e.g. makes copious mistakes while pasting HTML content. It does not understand, well, how to understand HTML.


    CSS Howto..

    How can I add interactive content to a Bootstrap popover?

    How Do I Perfectly Center a Float Element in Between Two Floated Elements?

    How do stop elements from changing (properties) during javascript events?

    How do I set multiple elements' css in one page without the :not attribute?

    How to put the hover image above the original image

    How to remove borders around a div (nav, footer, whatsoever) in a WordPress theme? [closed]

    Hide/Show Content at Specific Scroll Positions

    How to get smooth Google fonts?

    Newbie: How to have a row background in my case?

    How do you create different CSS for dynamically generated elements?

    How to make a gallery

    How to use Chrome Inspector to show the popup css for a jquery plugin

    style a navigation link when a particular div is shown

    How to increase the gap between text and underlining on my navbar links

    how to keep table 100% wide?

    How to style HTML compatible tags in XSL definition using extenal CSS?

    How to make list items of one UL with fixed height be displayed as columns?

    How to create circles around a circle with css, javascript?

    How to make background image go in the “background” using CSS/HTML

    How do I make footer take 100% of the width of the webpage?

    Box-shadow is overlapping other elements, how can I fix it?

    How to style CSS role

    How to Toggle CSS3 Accordion on Click

    How to style a