11 Great Article, Nice Toolbar

The majority of the comments above don’t give praise where [I think] praise is due. Just the shear fact that the super handy “Developer Toolbar” was pointed out to us makes it worth it’s weight in gold. A simple two-second add-on to Firefox (or Mozilla) and you’ve got your web development IDE! I haven’t tried yet, but I see no point in coding CSS in one text editor only to switch back and forth (thank dog for Ctrl+Tab) to see the results.

I have have to admit the CPU (my old PIII anyway) is a bit dogged out in CSS Edit mode, but it sure beats the traditional method of creating a style sheet and jumping back and forth to view the page.

That’s without even touching on the purpose of this article, helping create perfect print versions of our sites.
Upon first look, I thought there would be an option on the dev toolbar to switch to a “Print View” which would scrunch the page down to 8 1/2” by 11” sizing, then you can edit the @media=“print” version of the CSS rather than the screen version. It’s a minor complaint considering the greatness of the toolbar, I give it a 9/10.

>> Having said that, we are stuck with it.
>> I recommend a new approach from the good
>> people who produce this site

Nobody is stuck testing/developing in IE, only stuck having to hack your CSS to look good in IE… pretty big difference. There is no reason (nor logic) why a web developer would choose to ignore standards compliant web browsers in favor of web development in a buggy, IE browser. It sounds like self-inflicted punishment to me.

posted at 06:54 pm on May 21, 2004 by Justin

12 Adjacent selectors okay, since it's Mozilla

>Am I wrong, or won’t the clever adjacent
>selector rules shown at the article’s end
>fail in the ever popular IE 6?

Justin basically says this, but:

The article is written to help people take control over the web pages they /use/ — and the browser used is Mozilla, so there’s no need to write code compatible with IE 6.

(By the way, is it just me or is there no longer a #contentBox at Boxes and Arrows? I think it can be replaced with the rather strange selector “table>table + table table”)

posted at 08:30 pm on May 21, 2004 by Jonah Cosley

13 whoops, again

No, no, sorry, I goofed again. This gets that main content area visible while hiding the rest (except the copyright):

• {
  visibility: hidden;
  }

table + table * {
visibility: visible;
}

td[bgcolor=”#DCDCDC”] {
display: none;
}

posted at 08:50 pm on May 21, 2004 by Jonah Cosley

14 Boxes and Arrows...

Jonah wrote: “(By the way, is it just me or is there no longer a #contentBox at Boxes and Arrows?”

Actually – #contentBox is still there. Its found on the individual article pages which is where the “create your own print style sheet” customization would be most useful… Nice work on the attribute selector to hide some of the “other” content on that main page!

posted at 11:37 pm on May 21, 2004 by Derek Featherstone

15 web tools for ie6

web tools pro
http://www.iconico.com/webtool/index.asp
will do the same for ie6 as firefox is able to with dev tools

posted at 03:48 am on May 22, 2004 by ohka

16 css limitations(?)

i usually like server generated documents because they cator to things like displaying link URLs in the pages they generate for.

Most of us have had to have experienced printing out an article filled with links to external resources, sometimes vital to understanding the article, and then later realizing that we have no idea what those links’ urls are once we are reading it over. sitepoint’s printable page for example printed a number next to given links in the article, and then later on at the bottom of said article gave the url to the corresponding numbers… for instance if i were linking to ALA in the article it would say [url=“http://alistapart.com”]ala[/url]¹ and then at the bottom:

[1] http://alistapart.com

can CSS do something like that? What about other pitfalls?

posted at 08:30 pm on May 22, 2004 by mike

17 CSS generated content

mike, I don’t think CSS can collect all the URLs and then display them as a list at the end of the document. However, it can display the URL right after (or before) the link text:

HTML:
[url=“http://alistapart.com”]ala[/url]

CSS:
a:after { content: “ <” attr(href) “>”;
}

RESULT:
ala <http://alistapart.com>

posted at 06:29 am on May 23, 2004 by Andre Leistner

18 editCSS ?

maybe i missed a reference to it in the article, but…surely you also meant to include the editCSS extension to your requirements list?

posted at 01:20 pm on May 23, 2004 by patrick h. lauke

19 re: editCSS

Patrick: “maybe i missed a reference to it in the article, but…surely you also meant to include the editCSS extension to your requirements list?”

Actually — editCSS is built in to Chris’ Web Developer Toolbar as of version 0.7 from March 12, 2004, so that’s why I didn’t list it as a separate requirement…

So… as Patrick mentions, if you haven’t got the most up to date version of Chris’ toolbar, you might want to update it, or get the Edit CSS extension separately… Thanks Patrick!

posted at 06:27 pm on May 23, 2004 by Derek Featherstone

20 You've GOT to be Kidding, right?

The whole premise of this article is flawed.

In my mind, “printing it my way” shouldn’t include: – Downloading and installing a new browser and toolbar – Learning more about CSS – Learning a bunch more about the code of a site I just want to print from – Creating new code for each new site (or page type) that I want to print

Why in the world would someone want to go to all this trouble just to print a web page “better”?

I’ve already got basic printing capabilities with my browser. I can also turn images off, and if sites are coded properly, I can change font sizes. I also have some other options depending on what I’m trying to capture in print: things like screen captures and copy & paste often come in handy if I’m just trying to print part of a page. While many of these options aren’t ‘simple’ for the masses, they are much, much simpler than the approach outlined in the article.

User-specified, site specific, print stylesheets aren’t realistic. The article is an exercise in what is theoretically and maybe technically possible, but it is not pragmatic. Even the most technically advanced web developers wouldn’t want to use this approach on a regular basis. They just want to click the print icon (or hit ctrl-p) and have done with it. They’re busy people.

Now, if you can tell me how my site could provide our users more flexibility in printing without putting such a heavy burden on every user, THAT would be valuable! :-)_

posted at 11:48 am on May 24, 2004 by Lyle, Lyle, Croc O' Lyle