molly.com
Friday 30 March 2007
Back to Work: Someone Please Clearly Articulate hasLayout?
At the recent AEA Boston, both Eric Meyer and I were stumped by two questions asking to explain hasLayout. Neither of us could articulate it well.
I’ve studied the documents, talked to some friends who have worked closely with it, and still fail to have a clear understanding of this rather mysterious piece of the way Internet Explorer handles layout.
Anyone who can help out by explaining and articulating, in as simple a description as possible, what hasLayout is and how it works . . . well, I’d be grateful!
Filed under: aea, browsers, ie7, microsoft, professional, software
Posted by: Molly | 04:49 | Comments (40)
The real answer:
“Layout” is an IE/Win proprietary concept that determines how elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events.
This quality can be irreversibly triggered by some CSS properties. Some HTML elements have “layout” by default
http://www.satzansatz.de/cssd/onhavinglayout.html
The real answer is that it’s mysterious voodoo.
I wonder if they’ll nuke it in IE8.
Oh yeah, we need this. I did a conference talk on IE7 earlier this week and couldn’t explain it either. This is the best description I’ve found: http://www.satzansatz.de/cssd/onhavinglayout.html
Don’t think that they’ll nuke it in «IE-N».
Backward compatibility, you know…
To me, it is like going to grandmas for dinner. Unless you tell your grandma what you wanted her to cook, dinner is a surprise, but limited to her usual tasty recipies. However, once in a while you get Lima bean and brusselsprout casserole.
Unless you tell the browser what layout you want for each element, it is going to guess, or do what it has been programmed to do.
it’s way over my head but this makes the most sense:
I don’t think you want me to articulate what I think hasLayout is..
I think it’s a mistake wrapped in an enigma.
My understanding is that “hasLayout” is an internal implementation detail in IE, that describes whether the element’s (and its children’s) position is calculated by calling a method of the element’s associated object (in which case it has layout) or by calling a method of the parent object.
Giving an element “layout” works around some bugs because different code paths are involved, but ideally (in a bug-free implementation) it should be completely irrelevant to web developers.
It’s a sort of ‘block formatting context’.
The way I understand it is that it’s largely a legacy thing.
In IE5, especially IE5.2 for Mac, setting hasLayout seemed to force the browser to recognize the CSS positioning. In general, hasLayout = false means that the browser is controlling the layout (positioning, size, etc) hasLayout = true means that CSS is controlling the layout.
In IE6, it seems that hasLayout is automatically set for most properties that would need it and IE7 just seems to have it on almost all the time by default.
From a programming standpoint, I’d say that this is something that was put in to get some CSS stuff to work without having to rewrite the rendering engine. I would be surprised if it was taken out unless they build a completely new browser from scratch.
Very interesting. Thank you.
Does the haslayout property within IE7 explain some of the rendering issues of its page zoom function — such as the zoom of left and right margins for centered content?
It appears that setting this property’s value to none for impacted div tags may resolve that issue?
Any input would be appreciated.
Sorry I lack the knowledge to answer the original question that Molly presented.
Thanks.
Andy Budd’s book CSS Mastery explains it this way, more or less: if an item controls its own size and placement, it has layout. If it doesn’t control its own size and placement, it doesn’t have layout, and its size and placement are controlled by the nearest ancestor element that does have layout.
It’s a hack to increase performance so that IE doesn’t have to figure out size and placement for every page element.
hasLayout is an alias for !vooDooMode. It means it’s come out of the limbo state of IE thinking “Oh sweet, nothing is strictly defined for this element – I can do whatever is fastest and easiest” into a defined state where it has to obey the laws of CSS physics. hasLayout means opening the box on the Schroedinger’s cat of the IE render model and finding out if it’ll act like a block/inline, relative/absolute, etc/etc, instead of some nebulous undefined state.
It’s isNotNull for the box-model. Or least, that’s how it’s always seemed to me.
An Event Apart Boston Summary
So I am finally getting around to writing up a summary of my time at An Event Apart Boston. I can’t even express how much that I learned. It was amazing to see so many respectable names in the web…
[...] molly.com » Back to Work: Someone Please Clearly Articulate hasLayout? &emdash; My arch-nemesis: hasLayout [...]
A search in the MSDN revealed a widely unknown property (erroneously called attribute) and I thought I share some findings.
The property is similar to the
haslayoutproperty and is calledhasconcept.hasconceptis set totruewhen some CSS declarations are made.Promising tests showed this solves for many problems in the Trident engine
haslayoutis not able to cope with; it even provides some more CSS2.1 compliancy. For example, it is known thatdisplay:inlinepluszoom:1acts likedisplay:inline-block. But: ifhasconceptis set totruein addition, it acts likedisplay:table-cell. And even better, the pseudo-element:first-letterwill simulate:after(in quirksmode, that is).To make use of it, first of all, authors have to determine the status of
hasconceptin their documents:true | false | undefined. Authors simply have to writejavascript:alert(document.hasconcept)in the IE5.5+ address bar.
If the document in question has this property set to
undefined, the rendering is going to get slightly buggy under circumstances that are not entirely clear to me yet (the rendering might appear correct on your display, but on another display, it won’t: check carefully if boxes are positioned a few pixels off on your client’s PC).I am preparing an in-depth article to demystify this voodoo property (a long technical read -sorry-, to be published on April 2, 2007). A new magick bullet, that’s for sure.
Ingo Chao–
Hopefully, you will be back here to post a link to your publication regarding haslayout, hasconcept, et al.
It would be very much appreciated.
Thank you very much.
Hi Thacker, please forgive me, it was April Fool’s Day, and I couldn’t resist to write something self-ironical. The cited article on having layout we wrote is descriptive for the most part. For another article, see the MSDN haslayout overview. Sorry again.
That was a good one, Ingo. You had me doing an MSDN search (”Huh?!?!? I don’t remember any hasconcept…”), but I did realize what day it was yesterday when it turned up no results.
:::chuckling::: Thanks, Ingo. I am, again, reminded of an applicable Jack Nicholson quote from a “Few Good Men”:
“Well, don’t I look like the f–king asshole.”
Hello,
thank you very much!
This description is perfect for me! I searched just this.
I make an link on my website to this here.
bye
I think it’s a mistake wrapped in an enigma.
Hi
good nice
post thanks.
Hi
good nice
post thanks.
This article is very interesting and written by some clever guy.:) Thank you!
thank you very much!
This description is perfect for me
nice
schöne seite, weiter so…
LG Mike
thanks…
we’ll post an update here once it’s done
[...] Bei derartigen Bugs hilft, glaube ich, nur noch hasconcept __________________ Ingo Chao [...]
nice site
good article
thankssss
good sitee
good blogger
very nice
thanks
zayıflamak, kilo verme, dogal, Zayıflama hapları, zayıflama, zayıflama, diyetle kilo verme , bitkisel zayıflama, zayıflama hapları , diyet ürünleri , rejim, diyet, zayıflam, diyet proğramı, diyetin, zayiflama hapi, zayiflama haplari, zayıflama hapları, zayiflama ilaçlari, zayiflama yöntemleri, zayıflama çayı, zayıflama yöntemleri, zayıflama ilacı, zayıflama diyetleri,
thanks youu..