I am REALLY curious how a web page is parsed into a DOM tree, then how the tree is rendered in a web browser. Namely,how does layout engine work?
I guess whether reading source code of a simple web browser (Webkit is too hard for me now.
) is a feasible choice? Thanks
Parsing a web page into a DOM tree isn't terribly difficult to understand since (well-formed) HTML is already in a tree structure. So I don't think there's much to it except when you want to also annotate things like CSS, conditional code, and scripts into your tree.
Layout and rendering is a much more challenging problem to work out. If you're not ready to dive directly in the code, you can read their docs:
WebKit Layout and Rendering
You can also go to this link which has a great explanation and review of the concerned question.
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
The page linked to by #binariedMe is good for understanding the narrative of when a browser parses html and then applies layout rules. If you want to get a more solid mental model of those rules, you should read http://book.mixu.net/css/
Related
I would like to setup an AMP HTML web site that is paginated like a book. Naturally, in addition to having the ability to click/tap left/right arrows, I would like to offer the ability for the reader to swipe back and forth.
I considered the idea of using amp-carousel but then I would need to pre-load every single page, correct? So, what is the alternative? I discovered that in general, I could use JQuery, but how can I incorporate this within AMP HTML?
Thanks in advance!
Keith
In manifest.json, we specify our background page and can put an html or a js file for it. Since it is only a script that executes what sense does it make to have an html file for it?
I mean where is UI going to get shown anyway?
Similarly the devtools_page property has to be an html file. What sense does that make?
It will not be shown anywhere (that's the essence of "background"), but some elements on it make sense.
You can have an <audio> tag, and if you play it, it will be heard.
You can have an <iframe> with some other page loaded invisibly.
..and so on
As for devtools_page, it would actually be visible in the interface (as an extra panel in the DevTools)
It is possible that devtools_page must be an HTML file just for legacy reasons: it was not updated when manifest version 2 rolled out with changes to how background pages are specified. Still, the same arguments as above apply.
background_page is a legacy feature from the initial support of extensions in Chrome. background.scripts was added in Chrome 18. I can't speak for Google's original intentions but I'd guess that in the original design using an page felt more natural and would be less likely to confuse developers. Once they realized how many background_pages were just being used to load JavaScript it made sense to explicitly support that.
When designing and previewing a report in BIDS everything looks fine, but once rendered in a web browser the text boxes resize. I've tried a few things to stop this including using rectangles as place holders. Does anyone know of a workaround for this?
Here are some screenshots. First design view:
Render view:
In my experience, SSRS is not a very good tool for precise rendering. I've had the issue describe in various forms before, and can only offer a few options:
Don't care. Design your report in a way that it doesn't matter how it's exactly rendered.
Focus on one renderer. Don't optimize for both the BIDS Preview and the HTML rendering, but only on the final one (probably HTML). Note that with HTML you do have to deal with cross-browswer issues.
Use tables for layout. I know, this is frowned upon in CSS land, and I personally don't like it either. But a matrix may be your best bet at approaching pixel-perfectness, and from your screenshot it even looks like you have tabular data so it's even possible to rationalize the choice.
Choose another renderer. Deliver your report in Excel instead of HTML. With Excel it should be easier to get to a nicely layouted table.
Are Content Scripts (http://code.google.com/chrome/extensions/content_scripts.html) injected into prerendered pages (document.webkitVisibilityState== 'prerender') ?
I’ve been reading https://developers.google.com/chrome/whitepapers/prerender and https://developers.google.com/chrome/whitepapers/pagevisibility, and am trying to figure out how Content Scripts work with page prerendering/prefetching.
Thanks
TheZ, tomdemuyt: I’m afraid you guys are missing the point. ‘run_at’ specifies whether the content script is injected before or after the DOM is constructed.
However, I am talking about document.webkitVisibilityState, which can be ‘prerender’ (when the page is in a background/invisible tab), ‘hidden’, or ‘visible’. Note that webkitVisibilityState can transition from ‘prerender’ to ‘hidden’ or ‘visible’, or back and forth between ‘hidden’ and ‘visible’, without any changes being made to the DOM. (In order to better understand this, read the articles linked in my original post.)
I think I’ve been able to determine that content scripts ARE injected into prerendered pages. Here’s the problem, however: let’s say my content script does something that should not occur on a prerendered page. For instance, it does pageview count, or adds animation, neither of which should begin until the user is actually viewing the page. So it seems that my content script should do something like what’s shown in the code examples on https://developers.google.com/chrome/whitepapers/pagevisibility - check document.webkitVisibilityState, and also listen to the ‘webkitvisibilitychange’ event, and only do pageview count/start the animation when document.webkitVisibilityState is, or has transitioned to, ‘visible’.
I may have just answered my own question, but I just wanted to make sure that I was on the right track.
Thanks
As TheZ mentioned, you should ues the run_at setting.
Link to docs : http://code.google.com/chrome/extensions/content_scripts.html#registration
I'm trying to style search results and I can't figure out how to access any of the page properties (like title) in the search results, except the html.
Any help would be appreciated
You mean in CSS? Using your browser dev tools, it should be easy to figure out a good selector, but it's hard to give a generic answer as that entirely depends on the theme you're using. With theme machine, that could be: .search-results .content-item h1.