Comments on: Understanding the CSS display property http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/ The work & play of Radu Chelariu Mon, 13 Jun 2011 06:52:35 +0000 hourly 1 http://wordpress.org/?v=3.2.1 By: Jay BR http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-556 Jay BR Sun, 11 Jul 2010 03:01:10 +0000 http://sickdesigner.com/?p=1187#comment-556 Very useful tool. Maybe you could improve it if rules were applied to just one element type. That would allow for more effective comparison, I guess. Apart from that, the retro TV lends a ludic and pleasant atmosphere to the whole experience. Humble congratulations. Very useful tool. Maybe you could improve it if rules were applied to just one element type. That would allow for more effective comparison, I guess. Apart from that, the retro TV lends a ludic and pleasant atmosphere to the whole experience. Humble congratulations.

]]> By: Cosmin Negoita http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-555 Cosmin Negoita Sat, 10 Jul 2010 23:35:23 +0000 http://sickdesigner.com/?p=1187#comment-555 Nice article and demonstration :) Thank you! Nice article and demonstration :) Thank you!

]]> By: JT http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-552 JT Sat, 10 Jul 2010 18:38:59 +0000 http://sickdesigner.com/?p=1187#comment-552 Very interesting and enlightening. However, one point - the W3C spec says the default value of display is "inline" for all elements, unless otherwise specified in the user agent stylesheet. Pretty much all browsers under the sun set it as "block" for divs, and likewise certain other elements have default values other than "inline" as accepted standard in all user-agent stylesheets. Very interesting and enlightening. However, one point – the W3C spec says the default value of display is “inline” for all elements, unless otherwise specified in the user agent stylesheet. Pretty much all browsers under the sun set it as “block” for divs, and likewise certain other elements have default values other than “inline” as accepted standard in all user-agent stylesheets.

]]> By: Radu Chelariu http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-543 Radu Chelariu Tue, 06 Jul 2010 06:33:00 +0000 http://sickdesigner.com/?p=1187#comment-543 I will Arun, the fixes are in the works :) Thanks! I will Arun, the fixes are in the works :) Thanks!

]]> By: Arun http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-542 Arun Tue, 06 Jul 2010 06:31:26 +0000 http://sickdesigner.com/?p=1187#comment-542 original and amazing work !! I want to subscribe the feed, but could not . Please fix it. Many thanks original and amazing work !!
I want to subscribe the feed, but could not . Please fix it.
Many thanks

]]> By: Radu Chelariu http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-537 Radu Chelariu Mon, 05 Jul 2010 13:32:04 +0000 http://sickdesigner.com/?p=1187#comment-537 :) I didn't think my replies in a Corleone voice, but now that you mention it, it kind of works! Thanks, Duane, it's very nice of you. :) I didn’t think my replies in a Corleone voice, but now that you mention it, it kind of works! Thanks, Duane, it’s very nice of you.

]]> By: csssample http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-531 csssample Sun, 04 Jul 2010 01:53:15 +0000 http://sickdesigner.com/?p=1187#comment-531 Its amazing article , nice one Its amazing article , nice one

]]> By: csssample http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-530 csssample Sun, 04 Jul 2010 01:52:38 +0000 http://sickdesigner.com/?p=1187#comment-530 Excellent blog, thanks Excellent blog, thanks

]]> By: Duane http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-527 Duane Sat, 03 Jul 2010 19:37:46 +0000 http://sickdesigner.com/?p=1187#comment-527 Great post. I love the way you handle the "Steve" comments very "Don Corleone" :) ...while he makes some interesting points, its really much ado about nothing I think. Your stuff is creative and original as usual, keep bringing the sickness my friend I have fired my doctor :) Great post. I love the way you handle the “Steve” comments very “Don Corleone” :) …while he makes some interesting points, its really much ado about nothing I think. Your stuff is creative and original as usual, keep bringing the sickness my friend I have fired my doctor :)

]]> By: Oren http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-518 Oren Thu, 01 Jul 2010 13:01:50 +0000 http://sickdesigner.com/?p=1187#comment-518 My bad, I read it the other way around. Great post anyways (twitted). My bad, I read it the other way around.

Great post anyways (twitted).

]]> By: Radu Chelariu http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-516 Radu Chelariu Thu, 01 Jul 2010 09:57:52 +0000 http://sickdesigner.com/?p=1187#comment-516 Of the two: a table element to express tabular data and a different element with display: inline-table to express the same tabular data, which do you reckon is more semantic? So, yes, "far more" would be it. Of the two: a table element to express tabular data and a different element with display: inline-table to express the same tabular data, which do you reckon is more semantic? So, yes, “far more” would be it.

]]> By: Oren http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-515 Oren Thu, 01 Jul 2010 09:24:23 +0000 http://sickdesigner.com/?p=1187#comment-515 In your "inline-table" description: "display: inline-table applied to element. Such as with the run-in value, display: inline-table is mostly useless as it's far more semantic to actually use a table element for expressing data in a tabular fashion, even inline." Did you mean "far more" or "far less"? In your “inline-table” description:
“display: inline-table applied to element.

Such as with the run-in value, display: inline-table is mostly useless as it’s far more semantic to actually use a table element for expressing data in a tabular fashion, even inline.”

Did you mean “far more” or “far less”?

]]> By: Sunny Singh http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-514 Sunny Singh Thu, 01 Jul 2010 07:22:05 +0000 http://sickdesigner.com/?p=1187#comment-514 I never really got the whole adding float/width/height but having the element still being inline thing, which is why I always add display: block. Your article definitely helps explain what's going on there, thanks. By the way, I love how the comments is on the left and the funny labels, awesome layout. I never really got the whole adding float/width/height but having the element still being inline thing, which is why I always add display: block. Your article definitely helps explain what’s going on there, thanks.

By the way, I love how the comments is on the left and the funny labels, awesome layout.

]]> By: Radu Chelariu http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-512 Radu Chelariu Thu, 01 Jul 2010 05:32:34 +0000 http://sickdesigner.com/?p=1187#comment-512 Thanks for the kind words, Jamie. About the RSS feed, I'm working on the issue. I still don't know why it's acting up. It's surely because I moved hosts recently but so far the problem has not been identified. Don't worry, though, you can still follow @sickdesigner on Twitter or join the Facebook page. And as soon as the RSS feed is up and running, I'll be sure to let you know! Thanks for the kind words, Jamie. About the RSS feed, I’m working on the issue. I still don’t know why it’s acting up. It’s surely because I moved hosts recently but so far the problem has not been identified. Don’t worry, though, you can still follow @sickdesigner on Twitter or join the Facebook page. And as soon as the RSS feed is up and running, I’ll be sure to let you know!

]]> By: jamie http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-511 jamie Thu, 01 Jul 2010 05:16:57 +0000 http://sickdesigner.com/?p=1187#comment-511 got a parsing error on your subscribe button. got a parsing error on your subscribe button.

]]> By: jamie http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-510 jamie Thu, 01 Jul 2010 05:15:42 +0000 http://sickdesigner.com/?p=1187#comment-510 I think steve is on crack or maybe trying to make people think he is really smart. I thought your way of presenting the information was very unique and interesting. I give you a big thumbs up. I think I am gonna have to subscribe to your future articles I think steve is on crack or maybe trying to make people think he is really smart. I thought your way of presenting the information was very unique and interesting. I give you a big thumbs up. I think I am gonna have to subscribe to your future articles

]]> By: Radu Chelariu http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-505 Radu Chelariu Wed, 30 Jun 2010 09:24:20 +0000 http://sickdesigner.com/?p=1187#comment-505 Glad to see you enjoyed the post! Steve actually brings up some good points in his second comment, so don't dismiss him on account of bluntness. Glad to see you enjoyed the post! Steve actually brings up some good points in his second comment, so don’t dismiss him on account of bluntness.

]]> By: Semblance http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-504 Semblance Wed, 30 Jun 2010 09:13:29 +0000 http://sickdesigner.com/?p=1187#comment-504 I scanned through Steve's first comment and can not be bothered with the next one! The display property can be tricky at times. You have set up a nice visual way to show the effects of different values to the display property. I have bookmarked the page! I scanned through Steve’s first comment and can not be bothered with the next one! The display property can be tricky at times. You have set up a nice visual way to show the effects of different values to the display property. I have bookmarked the page!

]]> By: Radu Chelariu http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-500 Radu Chelariu Tue, 29 Jun 2010 18:39:55 +0000 http://sickdesigner.com/?p=1187#comment-500 I must admit I first pegged you as a bit of a jerk, mostly on account of your bluntness. It's become clear to me that you are, indeed, a man of reason and I can understand and relate to your standpoint. Moreover, I respect your opinion, largely because it's well argued. Indeed, our work is, sometimes, tedious and boring, even pedantic as you say. But should we not try to see it in a more engaging fashion? Perhaps I, unwillingly, cared more about presentation than function. But I will not excuse myself, for as a great man once said: "my house, my rules". Indeed, the newer audience may have a hard time understanding the origins of that green screen or why the monitor and keyboard are pale and not "apple white". I think they'd have an even harder time understanding the origins of a '50s diner, even with all the splendid design it brings along. In the end, I have to commend you for the diner idea. It would truly be a stunning visual way to learn something like the display property but, in my opinion, just as cumbersome as my "retro TV" interface for the very reasons you pointed out. Thank you very, very much for your comment. It's people like you that drive me to better myself and my work and continuously challenge my thought patterns. Cheers, friend! I must admit I first pegged you as a bit of a jerk, mostly on account of your bluntness. It’s become clear to me that you are, indeed, a man of reason and I can understand and relate to your standpoint. Moreover, I respect your opinion, largely because it’s well argued.
Indeed, our work is, sometimes, tedious and boring, even pedantic as you say. But should we not try to see it in a more engaging fashion? Perhaps I, unwillingly, cared more about presentation than function. But I will not excuse myself, for as a great man once said: “my house, my rules”.
Indeed, the newer audience may have a hard time understanding the origins of that green screen or why the monitor and keyboard are pale and not “apple white”. I think they’d have an even harder time understanding the origins of a ’50s diner, even with all the splendid design it brings along.
In the end, I have to commend you for the diner idea. It would truly be a stunning visual way to learn something like the display property but, in my opinion, just as cumbersome as my “retro TV” interface for the very reasons you pointed out.
Thank you very, very much for your comment. It’s people like you that drive me to better myself and my work and continuously challenge my thought patterns. Cheers, friend!

]]> By: steve http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-499 steve Tue, 29 Jun 2010 17:59:23 +0000 http://sickdesigner.com/?p=1187#comment-499 "The point of the “totally useless retro TV” interface was to present the data in an engaging and visually appealing manner," Therein lies the rub. The fact of the matter is, much of what we are tasked with IS boring, or pedantic or plain. But the nature of that 'interface' is buy design I think. SHOULD we notice the picture frame when we look at the Mona Lisa? Should the museum wall jump out at us with stunning, beautiful colors and motifs or should it fade into the background, secondary to the art it showcases? The challenge to provide a display 'worthy of our artistic skills' will often clash with the functional requirements of our job or task. Your demo also brings into view a curious cultural or chronological bias : We both have seen those Green Screens of old, however , to much of this audience, I am sure they may seem a novel but truly anachronistic presentation. They just wont "get it", (except for the contemporary 'Lost' reference via which most will have had their only encounter with such computer hardware) This experience could be a very telling subject for a future post: Can you KILL an application by inserting a "Stellar user interface?" If we DO choose to revisit the "retro" look, how about a Diner? with the various INLINE CSS options being applied to the carousel of divs (each Div is a customer breakfast order, formatted different ways due to the CSS options outlined in your article) Flashy, and perhaps "above and beyond the call of duty" perhaps, but achieving the key functionality needed for a presentation: showing multiple options at the same time for comparison and contrast (eh?) “The point of the “totally useless retro TV” interface was to present the data in an engaging and visually appealing manner,”

Therein lies the rub.
The fact of the matter is, much of what we are tasked with IS boring, or pedantic or plain.
But the nature of that ‘interface’ is buy design I think. SHOULD we notice the picture frame when we look at the Mona Lisa? Should the museum wall jump out at us with stunning, beautiful colors and motifs or should it fade into the background, secondary to the art it showcases?

The challenge to provide a display ‘worthy of our artistic skills’ will often clash with the functional requirements of our job or task.

Your demo also brings into view a curious cultural or chronological bias : We both have seen those Green Screens of old, however , to much of this audience, I am sure they may seem a novel but truly anachronistic presentation. They just wont “get it”, (except for the contemporary ‘Lost’ reference via which most will have had their only encounter with such computer hardware)

This experience could be a very telling subject for a future post: Can you KILL an application by inserting a “Stellar user interface?”

If we DO choose to revisit the “retro” look, how about a Diner?
with the various INLINE CSS options being applied to the carousel of divs (each Div is a customer breakfast order, formatted different ways due to the CSS options outlined in your article)

Flashy, and perhaps “above and beyond the call of duty” perhaps, but achieving the key functionality needed for a presentation: showing multiple options at the same time for comparison and contrast

(eh?)

]]> By: joseki http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-498 joseki Tue, 29 Jun 2010 17:22:39 +0000 http://sickdesigner.com/?p=1187#comment-498 You have to get rid of the cool looking but frigging distrubing scan line. I agree with you, screw the ancient browsers and salut the modern technologies but I go further and curse also those painfully slow agencies who answers for new standards. They are sitting on the break pedal. You have to get rid of the cool looking but frigging distrubing scan line.

I agree with you, screw the ancient browsers and salut the modern technologies but I go further and curse also those painfully slow agencies who answers for new standards. They are sitting on the break pedal.

]]> By: Josh http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-495 Josh Tue, 29 Jun 2010 14:52:08 +0000 http://sickdesigner.com/?p=1187#comment-495 Don't be a dick. Don’t be a dick.

]]> By: Radu Chelariu http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-494 Radu Chelariu Tue, 29 Jun 2010 14:22:27 +0000 http://sickdesigner.com/?p=1187#comment-494 While your bluntness, coupled with the anonymity of your post naturally lead me to see your comment as nothing but trolling, I must admit you raise a few good questions. Perhaps tabulating and comparing the different values of the display property as you suggested would have been a more up-front approach. The point of the "totally useless retro TV" interface was to present the data in an engaging and visually appealing manner, suited mostly for those starting out with CSS that find looking at bland tables boring and at all engaging. The green scan will be removed later tonight, as it is clear that popular vote demands it. As I mentioned earlier, the lack of cross browser info is part of a new direction I am taking. Thanks for the comment. While blunt and perhaps a bit offensive, it was constructive and I will take your points into consideration in future posts. While your bluntness, coupled with the anonymity of your post naturally lead me to see your comment as nothing but trolling, I must admit you raise a few good questions. Perhaps tabulating and comparing the different values of the display property as you suggested would have been a more up-front approach. The point of the “totally useless retro TV” interface was to present the data in an engaging and visually appealing manner, suited mostly for those starting out with CSS that find looking at bland tables boring and at all engaging.
The green scan will be removed later tonight, as it is clear that popular vote demands it.
As I mentioned earlier, the lack of cross browser info is part of a new direction I am taking.
Thanks for the comment. While blunt and perhaps a bit offensive, it was constructive and I will take your points into consideration in future posts.

]]> By: steve http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-493 steve Tue, 29 Jun 2010 13:43:20 +0000 http://sickdesigner.com/?p=1187#comment-493 FAIL -total fail. Now, dont get me wrong, all the information is there (maybe) but presented how? It's like a 4 star restaurant decided to combine the hide and seek joy of an Easter Egg/Treasure Hunt with a 4 course meal, creating the buffet from hell! WHAT are we doing (supposed to be)? Answer: Showing off the different nuances and caveats of the CSS Display property. Obviously, the best approach would be some kind of table that listed and presented them ALL so that we could see them all! If we MUST use some kind of metaphor, the one to use would be a ECommerce "product comparison" metaphor, where the buyer (me) chooses various display options then clicks "Compare" to see how they look side by side. KNOWLEDGE! Seeing is power! Instead we have a well executed but totally useless retro TV static transition, perfect for TV Guide hawking old reruns of "I Love Lucy " and "Matlock" but FAIL as a teaching tool. Ditto from PatternHead about the annoying green scan line animation and yes, a cross browser dissertation would be of admirable value. Sorry to be so blunt, but I figure it would be a good counterpoint to the fawning over the "Emperor's New Clothes" FAIL -total fail.
Now, dont get me wrong, all the information is there (maybe) but presented how?
It’s like a 4 star restaurant decided to combine the hide and seek joy of an Easter Egg/Treasure Hunt with a 4 course meal, creating the buffet from hell!

WHAT are we doing (supposed to be)?
Answer: Showing off the different nuances and caveats of the CSS Display property.

Obviously, the best approach would be some kind of table that listed and presented them ALL so that we could see them all!

If we MUST use some kind of metaphor, the one to use would be a ECommerce “product comparison” metaphor, where the buyer (me) chooses various display options then clicks “Compare” to see how they look side by side.

KNOWLEDGE! Seeing is power!
Instead we have a well executed but totally useless retro TV static transition, perfect for TV Guide hawking old reruns of “I Love Lucy
” and “Matlock” but FAIL as a teaching tool.
Ditto from PatternHead
about the annoying green scan line animation
and yes, a cross browser dissertation would be of admirable value.
Sorry to be so blunt, but I figure it would be a good counterpoint to the fawning over the “Emperor’s New Clothes”

]]> By: Ignacio http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-491 Ignacio Tue, 29 Jun 2010 10:58:19 +0000 http://sickdesigner.com/?p=1187#comment-491 Really good. And not boring at all! Thanks. Really good. And not boring at all! Thanks.

]]> By: RiaanWest http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-489 RiaanWest Tue, 29 Jun 2010 10:31:00 +0000 http://sickdesigner.com/?p=1187#comment-489 Nicely done, thanks for the effort! I definitely learnt something. Man, I miss Lost... Nicely done, thanks for the effort! I definitely learnt something.

Man, I miss Lost…

]]> By: Federica Sibella http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-488 Federica Sibella Tue, 29 Jun 2010 09:49:53 +0000 http://sickdesigner.com/?p=1187#comment-488 Well, the demo is really sweet and with a lot of retro style. Just congratulation for the result and for the big effort behind it. Well, the demo is really sweet and with a lot of retro style. Just congratulation for the result and for the big effort behind it.

]]> By: Radu Chelariu http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-487 Radu Chelariu Tue, 29 Jun 2010 08:49:52 +0000 http://sickdesigner.com/?p=1187#comment-487 Thanks for your kind words! I'm not going to venture and take the scan line out just yet. Best to wait and see if others agree with you on this one. Popular vote, FTW! As for browser compatibility, it's part of my new direction to stop caring about it. Standards should be our concern, not caring for shotty software. This last phrase may have just cost me a huge flame war... ;) Thanks for your kind words! I’m not going to venture and take the scan line out just yet. Best to wait and see if others agree with you on this one. Popular vote, FTW! As for browser compatibility, it’s part of my new direction to stop caring about it. Standards should be our concern, not caring for shotty software. This last phrase may have just cost me a huge flame war… ;)

]]> By: Patternhead http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-485 Patternhead Tue, 29 Jun 2010 08:34:36 +0000 http://sickdesigner.com/?p=1187#comment-485 Great tutorial and the unique demo is sweet. A bit of constructive feedback... The animated green scan line is really annoying. It'd be nice if there was a section saying this works in browsers X, Y, Z... for each option. Keep up the good work :) Article added to http://csshead.com Great tutorial and the unique demo is sweet.

A bit of constructive feedback…

The animated green scan line is really annoying.

It’d be nice if there was a section saying this works in browsers X, Y, Z… for each option.

Keep up the good work :)

Article added to http://csshead.com

]]> By: Jamie http://sickdesigner.com/index.php/2010/html-css/understanding-the-css-display-property/#comment-477 Jamie Tue, 29 Jun 2010 05:29:09 +0000 http://sickdesigner.com/?p=1187#comment-477 Nice, much more interesting this way, thanks! Nice, much more interesting this way, thanks!

]]>