Tips, web design book reviews, resources and observations for teaching and learning web development.
Fluid–Create Site Specific Browsers from ATMac is a new concept to me and has interesting potential.
This stat filled video about social media is eye-opening.
Speaking of video, O’Reilly Media has a lot of video from the Web 2.0 Expo up on YouTube, including this interview with a good deal of talk about HTML5, Flash, and other technology from Brady Forrest, Eric Meyer, and Ge Wang.
The first-letter and first-line CSS selectors are among the pseudo-selectors. Pseudo-selectors exist not as discrete elements, but as variable elements that exist only as a factor of context or browser state.
First-letter is used to select only the first letter of an element. The syntax is:
p:first-letter {font-size: 1.8em;}
The CSS properties that can be styled for the first-letter selector are font, color, background, text-decoration, vertical-align, text-transform, line-height, margin, padding, border, float and clear.
First-line works with similar syntax.
p:first-line {font-style: italic;}
You can use descendant selectors. For example, if you applied a class called .first to the first paragraph of each section of your page, then a selector like
p.first:first-line {font-style: italic;}
would work.
The second of Aaron Anderson’s articles at WebAIM on Future Web Accessibility appeared. I recommend that you read the entire article, but there’s one section on headings that I want to quote here because I think it’s extremely important.
In current versions of HTML, the only way to define sections and outline-hierarchy of a document is use of the <h1>-<h6> in an otherwise flat structure. This is very beneficial to accessibility, but can be a bit awkward for web authors, especially when moving sections around in ways that change the heading depth. HTML5 introduces two new elements, <section> and <article>, that define logical sections and syndicatable articles present in a page; content hierarchy and heading levels are defined by nesting these tags inside each other. Because of this, HTML5 no longer requires that one actually use the correct heading level for a particular heading, but allows web authors to use <h1> everywhere, with the idea that assistive technologies and other systems can determine the heading level by the nesting of the <section> and <article> tags.
This is actually a perfectly fine way of doing things, but has the potential to create some sizable accessibility problems during the transition phase, that is, during the time where not everyone is using AT (of which there currently is none) that knows how to handle this. Since it will be several years before all the AT vendors update their products to support HTML5, and several more years before all users of those products upgrade to the newer versions, accessibility will require that we continue to use heading tags of the correct level, even when they’re inside nested <section>s and <article>s, at least for now.
Twitter finally came up with a way to embed a tweet into a web page without having to use a screen grab to get it. They call it Blackbird Pie. Almost within minutes, a handy bookmarklet doing the same task was released.
Drag the bookmarklet to your bookmarks bar, find a tweet and click the bookmarklet. Copy the HTML provided in the pop up.
Then you simply paste that HTML into your page and you have a tweet that functions just like a tweet on Twitter. All the clickable bits work. The timestamp is correct.
Here’s what I copied as an example.
You can donate a book with a comment about your favorite reading. How easy is that? http://bit.ly/9Bmz3z
Virginia DeBolt
vdebolt
Today at First 50 Words, I posted a piece called 10 Reasons Why that contained images of 10 tweets. I prepared the post a couple of days ago. At that time, images were the way to go. This new feature from Twitter—and the new bookmarklet that makes it even easier to use—are great advances in Twitter use.
How are you feeling about the new Facebook moves to capture and share your private information by making it almost impossible to find and set every relevant privacy setting in your account? I’m seeing posts like Top Ten Reasons You Should Quit Facebook and tutorials helping you find and set various privacy settings within the Facebook menus. Moveon.org has taken up the privacy invasion banner vs. Facebook.
What’s your position? Express yourself.
[polldaddy poll=3150885]
Thanks for sharing your opinion.
A couple of preview-type articles on what we can expect to see happening with CSS 3 are fascinating, even if not practical for immediate use. CSS Template Layout Module and The CSS 3 Flexible Box Model.
Introducing Dreamweaver CS 5 at the Adobe site gives you some highlights of the new Dreamweaver features in Creative Suite 5. The article mainly describes changes to working with live views and working to design for CMSes.
You can create horizontal sections in a data table by grouping rows within the table with the elements <thead>, <tbody> and <tfoot>. These sections or groups of rows then take on properties that can be useful in terms of styling and are helpful when printing multipage tables.
One or more table header rows can be formatted as <thead>. There can only be one <thead> element in a table. Likewise, you can only have one <tfoot> element per table. It can include one or more rows of footer information.
The main body of the table can be formatted as <tbody>.
Here’s the interesting part. The <thead> and the <tfoot> must be marked up before the <tbody> in the document flow. Here’s a super simple example:
<table>
<thead>
<caption>An optional caption</caption>
<tr>
<th>A header</th>
</tr>
</thead>
<tfoot>
<tr>
<td>repeat the header info</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Some data</td
</tr>
</tbody>
</table>
There’s a reason for this order in the document flow. It’s done so that the browser can render the top and the bottom of the table before beginning on the main part of the table. This also allows the header and footer section to be printed on every page when a long table is printed.
If the table is long enough to require scrolling on a screen or multiple pages in print, it’s a good idea to use the footer area to repeat or summarize the column header information from the headings.
In terms of CSS, these additional elements in the table give you additional hooks for CSS rules.
Support for these elements varies among browsers. In some browsers, when scrolling a long table, the <thead> and <tfoot> elements remain fixed while scrolling the <tbody>.