Forum Moderators: open
1. Styling of input elements now supported.
2. Cursor elements are now supported.
3. Title attributes now show the word Title: in the tooltip or pop up.
I know these are very basic, but they have always bugged the heck out of me. I'm not too concerned about the word Title: in the tooltip, but the other two have been an ongoing issue. Anyone else seeing any noticeable changes in CSS support? In what ways?
I would point out the huge advantage of the alternative style sheets that come with this browser, as pointed out by papabaer here [webmasterworld.com] in the CSS forum.
v7.11 also includes support for generated content
Now that is a superbly big step in the right direction.
The support for <colgroup valign="top"> saves a lot of typing.
Another nice thing is that it supports the innerHTML property. That finally allows for dynamic content.
The best new feature in Opera 7 is the navigation with Shift-arrow, allowing you to jump from hyperlink to hyperlink in a superbly natural way. It's really amazing! It doesn't care about frames, tables, positioned boxes, document flow, or other stuff only relevant to developers. Makes it much easier to surf the web without using that #$% mouse.
Spatial Navigation was first introduced in Opera's iTV business unit. With Opera for iTV on their set-top boxes, TV viewers appreciates how simple it is to use the arrows keys on their remote controls to navigate the electronic program guides or between links in Web pages. Now Opera is bringing the same concept to everyone's desktop computer. By combining the SHIFT and arrow keys on the keyboard, users can easily move to links or any other navigational element on a page.
It really is a very effective means of navigating links.
Opera 7.11 also has quite a bit of support for CSS3
Shrewd move in supporting a number of MSIE propriety features. A number of these, particularly innerHtml and custom/colored scrollbars, were contention areas that held back a number of IE users from making the switch.
I wonder if we will ever see Google developing a toolbar for anything other than IE? Like Opera or Safari or Mozilla?
Hopefully we will see Google creating one in the future, but for now, Googlebar [googlebar.mozdev.org] does a decent job of emulating much of the toolbar functionality in Mozilla... albeit without PageRank, which still requires firing up IE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head><title>Title</title>
<style>
box {position:absolute; top:10px; left:10px; width:300px; height:248px; padding:10px; border: 1px solid black;}
header {font-size:24px; background-color:#eeeeee; display:block; padding:10px 0px 10px 0px;}
paragraph {font-size:12px; color:#000099; display:block; padding:16px 0px 0px 0px;}
mytable {display:table; color:black; border-collapse:collapse;}
row {display:table-row;}
cell {display:table-cell; padding:2px; border:1px solid black;}
</style>
</head>
<body>
<box>
<header>Custom Tags Trick!</header>
<paragraph>Mozilla 1 and Opera 7 allow you to use your own tags, and apply CSS to them, so they work just like HTML. It's almost like XML!</paragraph>
<paragraph>Note: This does not work with Internet Explorer.</paragraph>
<paragraph>
<mytable>
<row>
<cell>This is a sample</cell>
<cell>table using cells</cell>
</row>
<row>
<cell>yet no standard</cell>
<cell>HTML was used!</cell>
</row>
</mytable>
</paragraph>
</box>
</body>
</html>
Generated Content - SEO Potential!
The page code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Generated Content - You see it, but it's not really there!</title>
<link rel="stylesheet" title="Widgets" href="generated-content-one.css" type="text/css" media="all" />
<link rel="alternate stylesheet" title="Widget Flavors" href="generated-content-two.css" type="text/css" media="all" />
<link rel="alternate stylesheet" title="Widget Prices" href="generated-content-three.css" type="text/css" media="all" />
</head>
<body>
<h1 id="variable-header"></h1>
<div class="=variable-content-by-stylesheet">
<p id="content-in-stylesheet"></p>
<p id="alternate-stylesheets-rule"></p>
</div>
</body>
</html>
The CSS for stylesheet generated-content-one.css:
#variable-header {content: Amazing Widgets!}
#content-in-stylesheet {content: Information that I DO NOT want on present in my page code as it dilutes my SEO formula and ruins the beauty of my concise and oh so beautifully scripted keyword rich text!;}
#alternate-stylesheets-rule {content: More information I would rather keep off page, but would LOVE my customers to see. You can change me by using ALTERNATE STYLSHEETS. Can you see the potential?;}
And... as you might already guess, the content is changeable via ALTERNATE STYLESHEETS!
Now the above example has no relevant keyword text anywhere in the actual page code, but the real potential is in mixing GENERATED CONTENT with standard content.
Imagine for a moment.... uh, pageone? Are you sitting down? Good... now take a deeeeep breath! There. Okay...
Imagine for a moment (and dream about it from this point on...!) being able to "craft" pages that have highly optimized keyword content present in the page code and uses GENERATED CONTENT to display content that well, for any number of reasons, you choose to keep out of the actual page code. CSS Cloaking? Not really... it's just 'lil ole Generated Content comin' at ya...
Looks like "G" is gonna hafta start parsin' "C"(SS) at some future date...
Intrigued?
- papabaer
Secondly, it will be best deployed as an "enhancement" though we all know it will be used and abused, depending on the author's scruples and intended purpose. Generated Content will be most effective when used selectively.
This will not replace XML, but will be another tool it the advanced webmaster's toolbox. Another powerful tool.
Yes.. the above example has nothing on page for the spiders to parse... but remember, it is a very basic example. Real usage would see headers and page text (present in the actual HTML) that are finely tuned to a particular SEO target, while less relevant (read: potentially diluting) text, can be served via generated content.
There are MANY potential uses to be considered. Many.
But.. as I said, Only Opera 7 offers support for generated content at this time. Still.. it's nice to plan ahead.
----- I'm going to start incorporating some of these 'finer points' in an upcoming project where I expect a good portion of users to have Opera 7. I'll let you know how it pans out!
Thanks again..
Nick
em[title]:hover {
cursor: help;
background: #ffc;
}
pre:hover {
background: #ffd700 url(dido02.jpg) right top no-repeat;
}
code:hover[title] {
text-decoration: blink;
color: #8b0000;
}
Gotta love those attribute selectors!
Now how about :before and :after?
div.main:after {
color: #d6d6d6;
font-size: 0.7em;
}
p:before {
display: block;
text-transform: capitalize;
color: #00008b;
font-weight: bold;
content: counter(chapter,upper-roman) "-" attr(id);
counter-increment: chapter;
}
Now we're gettin' serious!
- papabaer