How to get all the CSS associated with the element? Here there is a solution available here which is based on the window.getComputedStyle function which will return the value that is generated by the browser (after computing) and it is completely browser specific. And also it is producing very long code. For eg.,,
#check {
background: orange;
padding: 2em;
}
will retrieve the following code in chrome,
background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 165, 0); background-image: none; background-origin: padding-box; background-size: auto; border: 0px none rgb(0, 0, 0); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-collapse: separate; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-top-left-radius: 0px; border-top-right-radius: 0px; bottom: auto; box-shadow: none; box-sizing: content-box; caption-side: top; clear: none; clip: auto; color: rgb(0, 0, 0); cursor: auto; direction: ltr; display: block; empty-cells: show; float: none; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; height: 20px; image-rendering: auto; left: auto; letter-spacing: normal; line-height: normal; list-style: disc outside none; margin: 0px; max-height: none; max-width: none; min-height: 0px; min-width: 0px; opacity: 1; orphans: auto; outline: rgb(0, 0, 0) none 0px; outline-offset: 0px; overflow-wrap: normal; overflow: visible; padding: 32px; page-break-after: auto; page-break-before: auto; page-break-inside: auto; pointer-events: auto; position: static; resize: none; right: auto; speak: normal; table-layout: auto; tab-size: 8; text-align: start; text-decoration: none; text-indent: 0px; text-rendering: optimizelegibility; text-shadow: none; text-overflow: clip; text-transform: none; top: auto; transition: all 0s ease 0s; -webkit-transition: all 0s ease 0s; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: auto; width: 496px; word-break: normal; word-spacing: 0px; word-wrap: normal; z-index: auto; zoom: 1; -webkit-animation: none 0s ease 0s 1 normal none; -webkit-animation-play-state: running; -webkit-appearance: none; -webkit-backface-visibility: visible; -webkit-background-clip: border-box; -webkit-background-composite: source-over; -webkit-background-origin: padding-box; -webkit-background-size: auto; -webkit-border-fit: border; border-spacing: 0px; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-flex-group: 1; -webkit-box-lines: single; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-box-reflect: none; -webkit-box-shadow: none; -webkit-clip-path: none; -webkit-color-correction: default; -webkit-column-break-after: auto; -webkit-column-break-before: auto; -webkit-column-break-inside: auto; -webkit-column-axis: auto; -webkit-column-count: auto; -webkit-column-gap: normal; -webkit-column-progression: normal; -webkit-column-rule-color: rgb(0, 0, 0); -webkit-column-rule-style: none; -webkit-column-rule-width: 0px; -webkit-column-span: none; -webkit-column-width: auto; -webkit-filter: none; -webkit-align-content: stretch; -webkit-align-items: stretch; -webkit-align-self: stretch; -webkit-flex: 0 1 auto; -webkit-flex-flow: row nowrap; -webkit-justify-content: flex-start; -webkit-font-kerning: auto; -webkit-font-smoothing: auto; -webkit-font-variant-ligatures: normal; -webkit-grid-auto-flow: none; -webkit-highlight: none; -webkit-hyphenate-character: auto; -webkit-hyphenate-limit-after: auto; -webkit-hyphenate-limit-before: auto; -webkit-hyphenate-limit-lines: no-limit; -webkit-hyphens: manual; -webkit-line-align: none; -webkit-line-box-contain: block inline replaced; -webkit-line-break: auto; -webkit-line-grid: none; -webkit-line-snap: none; -webkit-locale: auto; -webkit-margin-before-collapse: collapse; -webkit-margin-after-collapse: collapse; -webkit-marquee-direction: auto; -webkit-marquee-increment: 6px; -webkit-marquee-repetition: infinite; -webkit-marquee-style: scroll; -webkit-mask-box-image: none; -webkit-mask-box-image-outset: 0px; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask: none 0% 0% / auto repeat border-box border-box; -webkit-mask-composite: source-over; -webkit-mask-size: auto; -webkit-nbsp-mode: normal; -webkit-order: 0; -webkit-perspective: none; -webkit-perspective-origin-x: 280px; -webkit-perspective-origin-y: 42px; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.180392); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis-color: rgb(0, 0, 0); -webkit-text-emphasis-position: over; -webkit-text-emphasis-style: none; -webkit-text-fill-color: rgb(0, 0, 0); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: 0px; -webkit-transform: none; -webkit-transform-origin: 280px 42px; -webkit-transform-style: flat; -webkit-user-drag: auto; -webkit-user-modify: read-only; -webkit-user-select: text; -webkit-writing-mode: horizontal-tb; -webkit-app-region: no-drag; clip-path: none; clip-rule: nonzero; mask: none; filter: none; flood-color: #000000; flood-opacity: 1; lighting-color: #ffffff; stop-color: #000000; stop-opacity: 1; color-interpolation: srgb; color-interpolation-filters: linearrgb; color-rendering: auto; fill: #000000; fill-opacity: 1; fill-rule: nonzero; marker-end: none; marker-mid: none; marker-start: none; mask-type: luminance; shape-rendering: auto; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; alignment-baseline: auto; baseline-shift: baseline; dominant-baseline: auto; kerning: 0px; text-anchor: start; writing-mode: lr-tb; glyph-orientation-horizontal: 0deg; glyph-orientation-vertical: auto; -webkit-svg-shadow: none; vector-effect: none; background-position: 0% 0%; background-repeat: repeat repeat;
and firefox will produce,
animation: 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s normal none 1 none; animation-play-state: running; backface-visibility: visible; background: none repeat scroll 0% 0% rgb(255, 165, 0); border: 0px none rgb(0, 0, 0); border-radius: 0px 0px 0px 0px; border-collapse: separate; border-spacing: 0px; bottom: auto; box-shadow: none; caption-side: top; clear: none; clip: auto; color: rgb(0, 0, 0); content: none; counter-increment: none; counter-reset: none; cursor: auto; direction: ltr; display: block; empty-cells: show; float: none; font: 400 16px/20px serif; height: 20px; ime-mode: auto; left: auto; letter-spacing: normal; list-style: disc outside none; margin: 0px; marker-offset: auto; max-height: none; max-width: none; min-height: 0px; min-width: 0px; opacity: 1; outline: 0px none rgb(0, 0, 0); outline-offset: 0px; overflow: visible; padding: 32px; page-break-after: auto; page-break-before: auto; page-break-inside: auto; perspective: none; perspective-origin: 280px 42px; pointer-events: auto; position: static; quotes: "“" "”" "‘" "’"; resize: none; right: auto; table-layout: auto; text-align: start; -moz-text-blink: none; -moz-text-decoration-color: rgb(0, 0, 0); -moz-text-decoration-line: none; -moz-text-decoration-style: solid; text-indent: 0px; text-overflow: clip; text-shadow: none; text-transform: none; top: auto; transform: none; transform-origin: 280px 42px 0px; transform-style: flat; transition: all 0s cubic-bezier(0.25, 0.1, 0.25, 1) 0s ; unicode-bidi: -moz-isolate; vertical-align: baseline; visibility: visible; white-space: normal; width: 496px; word-break: normal; word-spacing: 0px; word-wrap: normal; z-index: auto; -moz-appearance: none; -moz-background-inline-policy: continuous; -moz-binding: none; -moz-box-align: stretch; -moz-box-direction: normal; -moz-box-flex: 0; -moz-box-ordinal-group: 1; -moz-box-orient: horizontal; -moz-box-pack: start; -moz-box-sizing: content-box; -moz-columns: auto auto; -moz-column-gap: 16px; -moz-column-rule: 0px none rgb(0, 0, 0); -moz-float-edge: content-box; -moz-force-broken-image-icon: 0; -moz-hyphens: manual; -moz-image-region: auto; -moz-orient: horizontal; -moz-outline-radius: 0px 0px 0px 0px; -moz-stack-sizing: stretch-to-fit; -moz-tab-size: 8; -moz-text-align-last: auto; -moz-text-size-adjust: auto; -moz-user-focus: none; -moz-user-input: auto; -moz-user-modify: read-only; -moz-user-select: auto; -moz-window-shadow: default; clip-path: none; clip-rule: nonzero; color-interpolation: srgb; color-interpolation-filters: linearrgb; dominant-baseline: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; image-rendering: auto; lighting-color: rgb(255, 255, 255); marker: none; mask: none; shape-rendering: auto; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; text-anchor: start; text-rendering: optimizelegibility; vector-effect: none;
So how to get the proper CSS code like Evernote which i can reproduce for any browser? Or is there any way to produce proper CSS from the generated CSS? Any help on this would be greatly useful.. Thanks in advance..
