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 to display red borders on required or invalid value input element in Chrome just like Firefox behaviour for HTML5 validation?

    In CSS computed properties panel, the topmost style does not seem to overwrite the less specific style — how could that be?

    Css: how to combine table and column specification into a single selector?

    How to style Text input in jQuery editable

    How to tell what in CSS files that is not used? [duplicate]

    Getting a resolution error on Chrome and Firefox for C9 app. Not sure how to resolve

    SASS: How to exclude part of selector

    How to set just a percentage of a color in CSS?

    Asset Pipline, how to add image path to background: url()?

    How do I force an image to be responsive using CSS so it stays in the same position?

    How do I get the border-radius from an element using jQuery?

    How to change img margin inside a table using css hover

    How to apply an opacity without affecting a child element with html/css?

    How to center field_with_errors class

    How to write different HTML for different screen sizes

    How to fix some issues with printing very basic HTML

    How to align more than one DIVs which list of letters to the center

    How show button hovering above an image or pressing over it? [closed]

    how to change css property of 2nd & 6rd DIV using jquery

    How to change class named active into link's active attribute in javascript

    how to change glyph height without changing the font-size?

    How to overlay divs with pure css?

    How to center two blocks with some gap inbetween using CSS?

    Paragraph Span Class and h3 Are The Same Hex Code, But Are Showing Up As Different Colors

    How to position a background image without background-position property

    How to displaying and hiding again the div after clicking a button

    Setting a revealing onhover behaviour for multiple elements-pairs with only CSS - how come this works?

    How to make two divs side by side using inline-block?

    How to change CSS with jQuery change and this

    links are showing up on each line, instead of inline