owls

CSS Quirks and Oddities

March 15th, 2018

CSS is a weird language. Some people don’t even want to consider CSS as a programming language. However to me it will always be one, maybe even THE one.

Of course CSS can only be used to style your webpages, but it evolved into the one thing that defines a pleasant user experience. Without styles there would be no layout, without styles there would be no hierarchy, animations, responsiveness, interactions, etc. Of course the majority of these can be executed with javascript, but it never going to be as performant as pure CSS.

However it has its quirks… Some things in CSS just dont perform the way you’d expect them to in certain situations. I stumbled upon this article by Medium about Lesser known CSS quirks & advanced tips, and there they go into detail about some of the weirder things.

Some such weird things are:

  • Vertical padding is relative to element’s width not height
  • Margins overlap, but only sometimes
  • Opacity can change the z-index stacking order
  • Height: 100% may not do what you think it does (because parent element’s height is not set)

One really cool thing I found though is the concept called the lobotomised owl selector. Yes, thats right, the lobotomised owl selector.

*+*

It allows you to setup a default behaviour for all layout elements on your page, so if a new one is added it can already respect those values even before its properly styled. I quite like this idea of setting up defaults, however it is really hard to implement on large project that has been deployed.

design in 2018

Webdesign in 2018

March 15th, 2018

Design is an ever evolving industry, and web design is no exception. The practices that were revolutionary in the beginning of the 21st century, seem archaic by modern design standards. Some may say it is hard to keep up, but there are always those that want to drive progress even further.

I aspire to be one of those people, that is why I jump at every opportunity to learn something new, whether it be code or design. Since I never really studied design, I may not have the keen eye that some of my friends do when it comes to layout, or hierarchy, or just plain taste. However I can tell good design apart from the rest.

Recently I stumbled upon this article on Medium titled 7 Practical Tips for Cheating at Design. Of course I read it and pretty much agree with all the point they’ve raised:

  1. Use color and weight to create hierarchy instead of size
  2. Don’t use grey text on colored backgrounds, make the text closer to the background color is what actually helps create hierarchy
  3. Offset your shadows
  4. Use fewer borders
  5. Don’t blow up icons that are meant to be small
  6. Use accent borders to add color to a bland design
  7. Not every button needs a background color

If you notice, I highlighted #4. That is because I was shocked as to how much cleaner you can make an application by removing borders. I tried it at work and for my personal projects and the results were just great.

Here on my blog I never really had borders, so it was already decent, but I now I see why this is.

Its already 2018 and our standards keep evolving, so good design is no longer a feature, is a requirement.