Differences between IE10 and Chrome Dev. Tools - Some HTML elements not showing in Chrome Dev Tools view.

[tare...@gmail.com]

I am trying to get the HTML and related CSS of an error message from some website, so that I can learn how it is developed.

Please see images below.

I noticed that there is one element which is the "X" of the left side, and the small "x" on the right side, the are not visible as elements in Chrome Dev. Tools. But, when I used IE10 Dev. Tools, I can select such "X" and "x" elements and I can see the related CSS and HTML Code. The code is as follows which is copied from IE10 Dev. Tools:

<x-archetype-glyph style="FONT-SIZE: 26px; FONT-FAMILY: 'LinkedIn-Glyphs-1.0.5', 'LinkedIn-Glyphs'; POSITION: absolute; FONT-WEIGHT: normal; FONT-STYLE: normal; LEFT: 12px; LINE-HEIGHT: 1; TOP: 7px"></x-archetype-glyph>

This tag is very strange, and I don't know why it is not showing in Chrome Dev. Tools, and not showing in IE 10. But, it is rendered perfectly correct in both browsers.

Appreciate if someone can explain to me why, and what is this tag.

[tare...@gmail.com]

Just a small correction:

This tag is very strange, and I don't know why it is not showing in Chrome Dev. Tools, but it is showing in IE 10. But, it is rendered perfectly correct in both browsers.

[PhistucK]

Perhaps the website uses different implementation for different browsers.

Search the styles drawer for ::before or ::after. Perhaps Internet Explorer gets these custom elements (x-...) while Chrome gets before or ::after to decorate the message using only CSS.

Googling x-archetype-glyph gets this result -

https://github.com/linkedin/archetype/pull/28/files

Which shows that Internet Explorer runs the expression(...) value which creates these custom elements.

☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/5f384959-0429-4a88-a91d-ec0a1f865057%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[tare...@gmail.com]

Thank you PhistucK !!! you made my day...

Appreciate it if you can help me with the following:

This is the CSS Code responsible for this effect:

div.alert:before, div.alert.error:before {

font-family: "LinkedIn-Glyphs-1.0.5","LinkedIn-Glyphs";

font-weight: normal;

font-style: normal;

text-decoration: inherit;

speak: none;

font-size: 26px;

color: inherit;

content: "\e001";

}

I tried to copy the needed CSS Code to a local HTML File, and I created all the styles inside the HTML (using Copy/Paste), but I am not getting the same effect. Somehow, the fonts 

"LinkedIn-Glyphs-1.0.5","LinkedIn-Glyphs";

are not applied when the HTML is rendered from my local PC ... as a matter of fact, I cannot understand what is happening exactly. Also, the look and feel of the error is messed up in the local HTML when it is rendered.

Another question, is how I can copy the HTML of a selected element and all applied CSS Styles easily using Chrome Dev. Tools. I can do that using IE Dev. Tools, menu "View/Source/Element Source With Style".

I could not find similar option from Chrome Dev. Tools.

Appreciate your help.

Tarek.

[PhistucK]

1. These are custom fonts, so you have to also copy the @font-face declaration (and perhaps the font files themselves, if the hosting server does not allow hotlinking) from their CSS file.

(I guess they just use the Archetype library)

2. I do not think there is a way to do that in the Chrome Developer Tools, sorry. You can file a feature request at crbug.com (only if you have not found one already), if you want this feature.

☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/36bc194f-802e-43c5-8a2c-96d8a3f9072d%40googlegroups.com.

[tare...@gmail.com]

Oh my God ! Copying the @font-face just worked !!!!

For the 2nd issue, I reported it already.

Just tell me if you were in my position, what is the best way to extract the HTML Code of a selected element, and all related CSS Styles?

While IE 10 provides this feature, still gives a lot of garbage which I don't understand, and it is confusing me. Besides, I love Chrome Browser and I want to stay with Chrome.

Tarek.

[PhistucK]

I just Control + A the entire style pane when needed.

Of course, this only works for a given element, not for its entire descendant tree.

☆PhistucK

Tarek.

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/7b6b655c-213a-42b9-9662-70a9084e3e3a%40googlegroups.com.

[tare...@gmail.com]

Just to let you know that Chrome Plugin named "SnappySnippet" works like a charm. It is just mind blowing.

Tarek.

On Friday, October 18, 2013 4:05:58 PM UTC+3, PhistucK wrote:

I just Control + A the entire style pane when needed.

Of course, this only works for a given element, not for its entire descendant tree.

☆PhistucK

On Fri, Oct 18, 2013 at 4:04 PM, <tare...@gmail.com> wrote:

Oh my God ! Copying the @font-face just worked !!!!

For the 2nd issue, I reported it already.

Just tell me if you were in my position, what is the best way to extract the HTML Code of a selected element, and all related CSS Styles?

While IE 10 provides this feature, still gives a lot of garbage which I don't understand, and it is confusing me. Besides, I love Chrome Browser and I want to stay with Chrome.

Tarek.

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.