Christian Ziebarth

Posts Tagged ‘css’

CSS :only-child Example

In Uncategorized on November 4, 2013 at 11:54 pm

There’s a CSS3 pseudo-class out there called :only-child that I didn’t think I would ever need to use. The Mozilla Developer Network says it, “represents any element which is the only child of its parent. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.”

When working recently on an overhaul of, however, I did find a need to use this pseudo-class. In the Company pages there are various tables of information. When the table uses just one row in the THEAD that row gets a powder blue background color. But when there are two rows in the THEAD the first row gets a lighter shade of background color while the second row gets the same color that a row will get if it’s the only child in a THEAD. The only way to get the only header row in one instance and the second header row in another instance to match, without resorting to class names or deprecated HTML, was to use the :only-child pseudo-class, like so:

  1. THEAD TR:nth-child(even),
  2. THEAD TR:only-child
  3. {
  4.   background-color: #CCE5FF;
  5. }

And here’s the CodePen I created to showcase the effect:

Read the rest of this entry »

Six Levels of Headers

In Uncategorized on March 23, 2009 at 1:07 pm

Had just started this entry on how I use HTML headers when I came across this site called The H1 Debate. It posits the question, “Should H1’s be used for a company logo or a page title?”

My belief is that the H1 should be the most important bit of information about the whole site, in other words, the string of text that names the entire site, while the H2 is the next most important header (obviously) and in most instances, though not all, would be the page title for any page of a site other than the front page. On this blog here the H1 throughout the entire site is “CMZ Media Developer.” The H2 is the title for each individual entry. When you are only looking at one entry there is only the one H2 on the page (unless you put an H2 within an entry, which you shouldn’t be doing as any header within an entry would be subservient to the H2) but in some cases, such as on the front page, there is going to be multiple H2 instances.

There’s going to be some differences from site to site since every site has different kinds of information but let me go through a couple examples from sites I have worked on to show how I have implemented headers. Read the rest of this entry »

CSS Libraries

In Uncategorized on March 7, 2009 at 6:29 pm

I think at least 20% of the job of a web developer is keeping up with all the new developments out there in our realm. It seems like every day there is new CSS this, or new jQuery that. One of the CSS libraries is Blueprint and a few months ago I began to use it for a project but realized it was like my own unnamed (as yet) CSS/JavaScript framework that I’d been using so I scrapped that idea.

Blueprint CSS

A couple months later I found a job listing for a Blueprint developer and wrote to them and said, “I have my own thing that’s like Blueprint that works even a little better. Would that work for you?” The guy was nice but said, “Well, we would give preference to a Blueprint developer.” And that was the last I’ve heard from him.

When I started my next project (United States Mexican Restaurants; yes, I have three Mexican food-related websites, but only three) I decided I would put it in Blueprint so I could say I had Blueprint experience. So what is my opinion on Blueprint? It’s okay, but maybe not really better than the framework I had created on my own (but was not visionary enough to market). I think I will probably at least keep this one project in Blueprint. People have discussed drawbacks to Blueprint, the main complaint being, “What I find with a lot of these frameworks is that they try to be ‘all things to all people,’ which leads to using more code than is necessary.” But I can live with it on one of my sites. Read the rest of this entry »

Data Tables, Lesson #2

In Uncategorized on March 2, 2009 at 2:27 pm

I’ve talked before about how there are proper uses for HTML tables in addition to the improper use (i.e., page layout) that most web developers seem to be aware of. Now I’m going to show an example of an HTML table put to proper use. On my Los Angeles County Mexican Restaurants blog I have an entry that shows the restaurants that have been covered so far.

Mex Food LA Table

This table has a number of interesting features that I will go through one by one. Read the rest of this entry »

A Dash of Progressive Enhancement

In Uncategorized on January 27, 2009 at 5:34 pm

Here’s a little example of spicing up forms a bit with minimal effort. A recent project I did was for a notary company (TCC Notary). Most of the pages on their site had forms that could easily be broken down into logical fieldset groupings.

Each box looked fine on its own but when you stacked them up their “boxiness” really came through. I started by giving the first fieldset on each page a non-repeating background image set to appear in the lower right corner. The image is the gray “TCC.” Any fieldset between the first and the last one is a normal, squared-off box, while the last fieldset on each page has a rounded lower right corner: Read the rest of this entry »

Just yell a little

In Uncategorized on December 29, 2008 at 8:11 pm

In the Internet world writing something in all caps is seen as the cyber-equivalent of yelling . . . vocally . . . out loud, basically rude “netiquette” (haven’t seen that term in a while). While I agree with that general sentiment I feel that there are situations where I wish people would just yell a little.

What I’m getting at is when mentioning X/HTML elements in articles and when referring to them within CSS documents I wish web developers would put them in capital letters.

It is true that within an XHTML document itself tags should be in lowercase but outside of an XHTML document there is no such requirement. The only exception is if your XHTML is being served as XML, in which case the elements in your XHTML document and their respective elements in the CSS must be exactly matched, but since XHTML is hardly ever served as XML that is only a rare case. Read the rest of this entry »