Archive for the ‘css’ Category

Testing HTML5 / CSS3 editor BlueGriffon

July 21, 2017 Leave a comment

I used to use the now-outdated Mozilla based editor Kompozer, which was a bug-fix fork of Nvu.

Today I realized that in the meantime (since 2015) the Nvu author Daniel Glazman has developed BlueGriffon, an Open Source next-generation Web Editor based on the current rendering engine of Firefox.

I just installed it on Windows at work and my Debian laptop at home and plan to give it a try.

If it is easy to use and generates clean standards-compliant code, I might use it for Web UI mock-ups and other prototyping. :)

Categories: apps, coding, css, firefox, gui, html Tags: ,

Slightly better looking ?

October 24, 2016 Leave a comment

My resume website now has a new scaling background image and uses the Open Sans web font. I hope it looks nice. Any feedback is welcome.

Categories: coding, css, Tags: ,

Viewport meta tag for better page rank in mobile Google search

April 25, 2015 Leave a comment

Algorithm changes are rolled out to Google’s data centres to let mobile-friendly web pages get higher ranking on Google Search. Some sensationalist news outlets call this “mobilegeddon“. I think it is much ado about very little.

Google provides a mobile-friendly test and at first did not pass.

So I learned about the viewport meta tag and after adding the following to the head section of my html pages they now pass the test:

<meta name="viewport" 
      content="width=device-width, initial-scale=1.0, user-scalable=yes"/>

About the viewport meta tag


The “viewport” meta tag is not part of the official HTML standard, but the validator at the W3C will still accept your pages as valid.

The tag was initially introduced by Apple Safari, but is now widely supported by most mobile web browser. As of spring 2015 Microsoft IE for Windows Mobile is the main exception: It requires some vendor-specific CSS.

Non-mobile web browsers typically just ignore the tag, which is fine because the whole “viewport” concept only makes sense for the relatively small screens of mobile devices.

Lacking a standard definition, for now the best specs are the respective web developer pages at Apple, Mozilla and Google.

Responsive accessible web design

Please note: Passing the Google test is nice for your page ratings, but truly “responsive” web design that works well on all browsing devices requires more effort, as this article on explains quite well.

And of course, all supporters of an open, inclusive web should always ensure the accessibility of their site, for everyone regardless of disability.

Categories: coding, css,, html Tags: , , ,

JQuery: Button to cycle through select options

November 9, 2014 Leave a comment

I wanted an html drop-down list to automatically appear as a simple button that changes color on every click as it cycles through the option values of the (hidden) select element.

The code sample is in this jsfiddle. It uses JQuery.

For each relevant select element, it styles the associated label so it looks like a button, hides the select element and handles clicks on the label button by cycling through the select options.

The display text of each option is used as a tooltip (‘title’ attribute) of the button which also serves as a css selector to color the button according to currently selected option.

The beauty of this is that the selected values of the hidden drop-downs can be submitted by regular form submit and that the form is fully functional if JavaScript is turned off.

The button styling requires CSS3, so IE8 is not suitable. I have tested this successfully in Firefox 33 and IE11.

Categories: css, html, jquery Tags: , ,

Simple accordion using CSS3 :target selector (no JavaScript)

March 14, 2013 7 comments

I made a simple “accordion” style UI that consists of several collapsed sections with only the “current” one expanded, using the CSS3 :target selector. I wanted the basic functionality of the JQuery UI accordion, but in a minimalistic way, without any JavaScript.

The :target selector is supported in all modern browsers, including IE9 and IE10, but not in IE8 and earlier.

In a real application with a variable number of accordion sections you would probably generate the HTML for the sections with some sort of iteration. You need to make sure that each section id is a valid unique id on the page and that the href of the link in the section header points to the section id, prefixed by ‘#’.

The minimal sample code is in jsfiddle 1, a version with some more visual style is in jsfiddle 2. For illustration, I am also posting the sample code here (see below).

I used a <div> for the whole accordion, a <fieldset> for each section, a <legend> for the section header and nested <div>…</div> for the section content.

Please note that you can use other HTML tags, as long as you use the CSS classes used in the stylesheet and the same kind of nesting.

HTML code:

<div class="accordion">
  <fieldset class="section" id="id1">
    <legend class="section-header">
      <a href="#id1">Section 1</a>
    <div class="section-content">
      Section 1 content
  <fieldset class="section" id="id2">
    <legend class="section-header">
      <a href="#id2">Section 2</a>
    <div class="section-content">
      Section 2 content

CSS stylesheet code:

.accordion .section {
    margin: 1em;
.accordion .section-header a {
    text-decoration: none;
    color: gray;
.accordion .section:hover .section-header a {
    color: red;
.accordion .section .section-content {
    display: none;
.accordion .section:target .section-content {
    display: block;
.accordion .section:target {
    border: 2px solid navy;
.accordion .section:target .section-header a {
    color: navy;
    cursor: default;
.accordion .section-header a:before {
    /* unicode triangle pointing right */
.accordion .section:target .section-header a:before {
    /* unicode triangle pointing down */
Categories: css, html

Extremely simple one-level drop-down menu using CSS

November 15, 2012 Leave a comment

The CSS below styles an unordered list with nested sub-lists as a horizontal menu with drop-down sub-menus (only one level). I tried to keep the code minimal with no effort for good looks. You can add your own styling as you like.

I have tested this successfully in IE8, IE9 and recent versions of Firefox, Chrome, Safari and Opera. I consider IE6 and IE7 broken beyond repair and basically ignore them.

Please test it in your browser at, and let me know about any problems you might find.

Style sheet:

.menu ul {
  background-color: tan;
.menu > li {
  display: inline-block;
  white-space: nowrap;
.menu ul {
  position: absolute;
  display: none;  
.menu > li:hover {
  position: relative;
.menu > li:hover ul {
  display: block;

Example HTML:

<ul class="menu">
      <li>Amfdf rt</li>
      <li>Brr zz</li>
      <li>Kala mala</li>
      <li>Hauki dauki</li>
      <li>Dudel didel</li>
      <li>Dudel döh</li>
      <li>Labedi bap</li>
Categories: css, html