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
|
|
