Stop data retention! Click here & act! Are you a webmaster and want to participate? Here you can find all necessary material for your website - Willst du auch an der Aktion teilnehmen? Hier findest du alle relevanten Infos und Materialien:
Chris Karakas Online Forum Index Karakas Online
 FAQFAQ   Forum SearchForum Search   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
Style change in Forums - what is your opinion?


Goto page Previous  1, 2
 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.
   Chris Karakas Online Forum Index -> PHP-Nuke Forum RSS Feed of this Forum
Share this page: These icons link to social bookmarking sites where readers can share and discover new web pages.Digg  del.icio.us  tc.eserver.org  Blinklist  Furl  Reddit  Blogmarks  Magnolia  Sphere  Yahoo!  Google  Windows Live  Technorati  Blue Dot  Simpy  Newsvine  Stumble Upon  co.mments.com  Blinkbits  BlogMemes  Connotea  View previous topic :: View next topic  
Author Message
chris
Dark Lord of the Sith


Joined: 10 May 2003
Posts: 6267
Location: Outer Space

PostPosted: Sat Jan 26, 2008 5:55 pm    Post subject:
Reply with quote

Thanks! Smile

When time comes for all browsers to support CSS3, we will be able to drop shadows easily - and hopefully faster! For the moment, only Safari supports CSS3 so I have to resort to some DOM manipulation through Javascript - quite tricky and heavy! You can read about it in ShadedBorder - JavaScript Round Corners with Drop Shadow.
_________________
Regards

Chris Karakas
www.karakas-online.de
Back to top
View user's profile Send private message Send e-mail Visit poster's website
chris
Dark Lord of the Sith


Joined: 10 May 2003
Posts: 6267
Location: Outer Space

PostPosted: Mon Jan 28, 2008 1:07 pm    Post subject:
Reply with quote

Well, no matter how beautiful the code block style looks, namely:

Image

I am going to replace it with the previous one:

Image

as soon as possible!

The ShadedBorder JavaScript script that I use to render the shadows creates a monster (albeit standards-compliant...Rolling Eyes) HTML for the poor browser to render! Just for the history, I used the Web Developer Extension for my browser to view the generated HTML code of How to use SAP DB from PHP in Linux (once you have installed the extension and the page whose code you want to see is loaded, go to Tools --> Web Developer --> View Source --> View Generated Source - "Generated" is the important thing here!). Here is what I saw: Shocked

Image

I have saved the code for you to inspect in the HTML or text editor of your choice:

DON'T CLICK ON IT:: Generated HTML code of topic 9705 with shadedborder.js script <-- Do: right-mouse-button click --> Save Link Target As..., then save it on your disk and open it with your editor.

It's a 12 MB TEXT file!!! It will bring your HTML or text editor to its knees every time you try to scroll a few lines - Arrow so be warned! Exclamation (well, that was before I processed the file to put every div on a separate line, i.e. when the code looked as in the image above. Now it's safe and fast to scroll down, so you can quietly study all those div's with no fear of crashing your editor.)

Twelve megabyte text...you have to roll this bonbon on your tongue before you try to swallow it!

This means that, even though my web server sends your browser just a few kilobyte text, the ShadedBorder JavaScript script makes a 12 megabyte monster out of it! Thus, each time you view such a page, your browser has to render 12 MB of HTML!

Why is this so?

Because, as it seems, the RUZEE.ShadedBorder script creates a div element for every pixel that has to be shaded around the box! Do you see all those div's in the image above?

Is this "standards-compliant" HTML code? The W3C Validator cannot say yes or no, because it sees the few KB of original HTML, not the 12 MB of generated HTML that shadedborder.js creates on the client through DOM manipulation and then presents to the browser for rendering!

I am quite confident that a local check of the HTML text (see link above) will say this is indeed standards-compliant HTML. What else is it, after all, other than some div's that are styled with CSS? Right?

Wrong! "Some div's" - that's where the whole problem is hiding! "DIV" means "this is a division" and is meant as a structural element to help you divide your document in, well...divisions. Look at the code again:

Image

Is that what this code does? Divide the document in structural divisions? It divides it in 68880 divisions (yes, I counted them all! Cool), but are they structural? Do they convey some structural separation of content? Do I have 68880 different text blocks there, each of them needing some special presentational treatment of its own?

No. Those div's are there for the sole purpose of shading 68880 pixels! And here is the proof:

Each on eof those 68880 div's has a width and height associated with it. A typical representative looks like this:

Code:

<div style="margin: 0pt; padding: 0pt; overflow: hidden; position: absolute; top: 6px; left: 7px; width: 1px; height: 1px; z-index: 0; opacity: 0.00964653;" class="sb-shadow"></div>


You see the "width: 1px; height: 1px;" there? Do I need to say more? These are 1-pixel divisions!

A division needs to be styled, among others also with "width" and "style" attributes. After all you want to make some divisions wider or higher than others. So a height of, say, 100 pixels, or a width of 500 pixels are totally acceptable. But is a width and height of 1 pixel acceptable?

Is a 1-pixel division a division or a pixel? A division is something structural, a pixel something presentational.

The RUZEE.ShadedBorder script misuses a structural element for presentational purposes! This is a far more serious reason for me for not using it, than the superficial statement "it's too heavy". Browsers become better and faster (faster? who says this? Mr. Green), processor's hearts beat billions of times per second - no doubt one day the script will run so fast that nobody will notice...

...but it will still be using structural elements to shade individual pixels - and for this reason I will still recommend against its use.

And for this reason I am going to revert to the old code block style right now! Smile
_________________
Regards

Chris Karakas
www.karakas-online.de


Last edited by chris on Tue Jan 29, 2008 5:18 am; edited 4 times in total
Back to top
View user's profile Send private message Send e-mail Visit poster's website
chris
Dark Lord of the Sith


Joined: 10 May 2003
Posts: 6267
Location: Outer Space

PostPosted: Mon Jan 28, 2008 4:42 pm    Post subject:
Reply with quote

Well, with just one extra div inside the original code div and a tiny (53 bytes!) semi-transparent background image, I was able to get shadows around the code blocks that are rendered lightning fast AND look nice:

Code:

indexing "Hello World in Eiffel"

class HELLO

creation
   run

feature

   run is
     local
       io : BASIC_IO;
     do
       !!io;
       io.put_string("Hello World!");
       io.put_newline;
     end; -- run

end; -- class HELLO


Granted, it reminds me of the good ol' DOS shadows, and it's not of the "rounded corners" type, but compare that to the 68000 div's above! Mr. Green

I owe this technique to the spartanic (literally "nontroppo"! Wink) article at Lurking in Shadows: CSS and drop shadow effects - Kudos and Thanks!

Phew...time to enjoy the new looks and forget the daemons that lurk in CSS shadows! Very Happy
_________________
Regards

Chris Karakas
www.karakas-online.de
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Share this page: These icons link to social bookmarking sites where readers can share and discover new web pages.Digg  del.icio.us  tc.eserver.org  Blinklist  Furl  Reddit  Blogmarks  Magnolia  Sphere  Yahoo!  Google  Windows Live  Technorati  Blue Dot  Simpy  Newsvine  Stumble Upon  co.mments.com  Blinkbits  BlogMemes  Connotea 
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.
   Chris Karakas Online Forum Index -> PHP-Nuke Forum
Page 2 of 2
This page contains valid HTML 4.01 Transitional - click here to check it!
This page contains a valid CSS - click here to check it!

 

Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group