Categories
CSS Web development

Transitions of SVG icons

How can we style SVG images on a web page? For instance to define a transition on hovering. Using the <img> tag will not work.

HTML

Neither will the CSS property background-image.

CSS

We must put the SVG element inline in the HTML code.

HTML

Now we can style the SVG elements using CSS selectors.

Sass

Include external file

Above we inserted a very simple SVG file. Larger SVG files would make your code messy. If you generate the page with PHP you may just include the SVG, to keep your code clean.

PHP

Include vs file_get_contents()

According to CSSTricks the get_file_contents function should be used instead of the include construct, to prevent problems with PHP parsing. I never encountered this problem though.

Categories
CSS Web development

Transforming a static element

When a CSS transform is applied to an element, like

CSS

it seems that element’s position property is forced to relative. This side effect introduces quirky behaviour, when you depend on the position being static.

Here’s an explanation of what happens. Luckily there’s also a simple solution to this problem.

A child outgrown its parent

Suppose we have an article element that contains a link:

HTML

To expand the area of the link responding to hovering and clicking/tapping to the whole article we can define a CSS pseudo-element:

CSS

This pseudo-element behaves like a child element of the <a>-tag in the DOM. By positioning it absolute and setting top, left, right and bottom to 0, it takes up the space of its nearest ancestor that is a positioned element. We want that ancestor to be our <article>.

CSS

Events received by the large pseudo-element now bubble up to its small parent. Below is an example that shows a box without and with mouseover.

The right image shows hovering works on the whole article. In this case the pseudo-element shows itself as a semi-transparent overlay.

Check that this works on CodePen.

Scaling up

Now suppose we styled the anchor element as a button and we want to react on hovering over the article by making the button bigger.

CSS

Can you predict what will happen? Check this CodePen.

It turns out that if you hover over the article but not the anchor the button starts to flicker. What happens is that when a transform is applied, the transformation must be relative to some basic state. Therefor its position is secretly changed to relative. Now the pseudo-element that was positioned relative to the article is suddenly positioned relative to the button. In effect the pseudo-element shrinks to the size of the button. This ends the hovering and as a consequence the transform and the position property of the button reverts to static. And then everything starts over again.

Side effects

So when a transform is applied to a static element, its position property is changed as a side effect. And as happens more often, side effects cause bugs, or quirky behaviour.

To prevent this I guess transformable objects should be explicitly positioned elements. However, this restriction is not in the W3 specification.

Solution

There is a simple solution to this problem. We need to change the HTML structure a bit and place the button inside the anchor element, as a child element:

HTML

Apply the transform to the button when the anchor, which is now the parent of the button, is hovered. This leaves the position property of the anchor alone, and prevents the pseudo-element of the anchor to shrink.

CSS
Scaled button on hovering the article.

Here’s a final CodePen to see this soluton at work.

Categories
CSS Web development

Order pseudo-classes

The order of definition of pseudo-classes for the anchor tag is crucial.

In Firefox I noted that if you define :visited after :hover, you may not get the style you expect when hovering over an <a> element. That’s logical, if you think of it. But it can be confusing because the Inspector seems to ignore the style for :visited, leaving us clueless.

Looking for clues I checked Chrome too. The problem did not occur there, but that was because I hadn’t visited the page the link was pointing to yet.

The recommended order is

  • :link
  • :visited
  • :hover
  • :active
Categories
Gutenberg Wordpress

Setting up a block

Just a note on the way I currently like to set up development of a Gutenberg block. Basically these are the steps mentioned in the WordPress block editor handbook, that uses the @wordpress/package to work with the webpack and Babel libraries, without too much hassle.

Assumed Node.js and npm are installed, enter

mkdir new-block
cd new-block
npm init

Next install the WordPress packages and all their dependencies. This may take a while.

npm install --save-dev --save-exact @wordpress/scripts

Add the following code to package.json:

"scripts": {
  "start": "wp-scripts start",
  "build": "wp-scripts build"
},

To start watching files and building the JavaScript while developing your block, type

npm start

To create the production code, enter the command

npm run build

Trouble shooting

When continuing development after an interruption, I often forget to restart watching/compiling with npm start and wonder why any change in the code fails to make any change in the output.

Categories
Gutenberg Wordpress

Use Gutenberg Group blocks for full-width containers

With the WordPress Gutenberg editor it is easy to create full-width blocks. If it isn’t already, we can activate this feature for the theme with the following line in functions.php:

add_theme_support('align-wide');

Combined with Group blocks, this allows us to create a full-width section where the inner content aligns with the content in blocks with regular width. The full-width containers can be used to show an alternative background color or image. Very useful for headers, footers, navigation bars etc.

The group block is present in Gutenberg Core since WordPress 5.3.

Step by step

  1. Create a Group block that will serve as our container.
  2. Make the block full-width.
  3. In the Advanced panel of the Inspector controls, set an additional CSS class, for example my-full-width-container.
  4. Use this class to style the full-width container.
.my-full-width-container {
    background: red;
    padding-left: 0;
    padding-right: 0;
} 
  1. The group block very conveniently adds an inner container with class .wp-block-group__inner-container. Match margins and padding of the inner container with those of the regular content blocks, for example:
.wp-block-group__inner-container {         
    max-width: 80%;        
    margin: 0 10%;        
    padding: 0 60px;    
}

Now we can put children blocks inside the full-width Group block that will align with the content in regular blocks.

Categories
Patterns

Vibrant dots

Dots on the move?
Categories
Patterns

Circles I

A circle thing