Home Messages Index
[Date Prev][Date Next][Thread Prev][Thread Next]
Author IndexDate IndexThread Index

Re: [News] [OSS] Mozilla Software Suits 'Power Users'

In comp.os.linux.advocacy, Erik Funkenbusch
<erik@xxxxxxxxxxxxxxxxxxxxxx>
 wrote
on Tue, 8 May 2007 03:31:53 -0500
<be9p96ijqdne.dlg@xxxxxxxxxxxxxxx>:
> On Tue, 08 May 2007 05:30:08 +0100, Roy Schestowitz wrote:
>
>> Make the whole Web look better with Stylish
>> 
>> ,----[ Quote ]
>>| Most Firefox users are familiar with the Greasemonkey extension, a
>>| powerful tool that lets you enhance your browsing experience by 
>>| rewriting HTML pages and JavaScript on the client side. The
>>| Stylish extension gives you that same level of control over
>>| Cascading Style Sheets (CSS). Unlike JavaScript, altering a
>>| page's CSS cannot change its functionality -- but it can
>>| greatly enrich its usability. 
>> `----
>> 
>> http://www.linux.com/article.pl?sid=07/04/30/1557201
>
> Actually, that's false.  Altering CSS can change it's functionality, for
> example by hiding elements, or in some cases generating new content.

Correct to some extent, and one can do some very
interesting styling things.

For instance:

a:before { content: 'Hyperlink: '; }

will put 'Hyperlink: ' before each and every hyperlink --
and each and every anchor as well, which is not usually desired
behavior, but that can be amended by looking for attributes:

a[href]:before { content: 'Hyperlink: '; }
a[name]:before { content: 'Anchor: '; }

If one wishes, one can use "class".  For HTML, this is
done e.g.

a[href].special:before { content: 'Hyperlink: '; }

so now anything with <a class="special" href="...">
gets a little extra warning. [*]

One can also use name= or id=, though arguably the
<div> tag is a more appropriate target than <a>, for
constructs such as

a#unique:before { content: 'This Unique Link: '}

One can of course stylize this text as one wishes;
one might, for instance, consider the following to be pretty.

a[href]:before { content: 'HYPERLINK: '; color: white; background-color:
blue; font-family: Helvetica; font-weight: bold; font-variant:
small-caps;}

One can also of course customize the actual link text as well:

a[href] { display: block; color: white; background-color: green; /* etc */ }

'display: block' puts the link on its own line (and
highlights the entire line in green, which may not be to
everyone's liking).

One can now append something afterwards:

a[href]:after { content: '(END LINK)'; color: white; background-color:
red; font-family: Helvetica; font-weight: bold; font-variant:
small-caps;}

If one wants to be silly (or hide irrelevant details,
though there are better methods),

a[href] { display: none }

should *hide* all hyperlinks.

One can also do all sorts of things with position, margin,
padding, top, left, right, bottom, width, and height.  I'll
refer the reader to http://www.w3.org/TR/CSS21 for the details.

Of course, code such as Javascript embedded in the page cannot
be modified using CSS, though said code might be able to read
style instructions -- I'd have to look.

[*] for non-HTML contexts one must use the selector

a[href][class~="special"]

instead.

-- 
#191, ewill3@xxxxxxxxxxxxx
Linux.  Because it's not the desktop that's
important, it's the ability to DO something
with it.

-- 
Posted via a free Usenet account from http://www.teranews.com


[Date Prev][Date Next][Thread Prev][Thread Next]
Author IndexDate IndexThread Index