CSS is fun and cool and I like it.
Link

A free guide to head elements

Josh Buchea rounds up all the stuff that could be put into the <head> for various reasons.

Fun fact I just learned, the only acceptable elements in the head are <link>, <script>, <meta>, <title>, and <noscript> (update: also <base> and <template>). If you put anything else in there at all, all browsers will abruptly end the <head> and start the <body>.

Also, this proliferation of stuff-in-the-head is at least in part why manifest.json is … Read article

user avatar
Shared by
Chris Coyier
Article

Getting Around a Revoked Certificate in OSX

Let me start this off by saying this is not an ideal trick and one I hope no one else needs to use because it's a bad idea to work around a browser feature that's aimed to protect your security.

That said, I am in the process of testing a product and ran into a weird situation where our team had to revoke the SSL certificate we had assigned to our server. We're going to replace it but I have … Read article

Link

Houdini Experiments

These experiments by Vincent De Oliveira are just the kind of thing Houdini needs to get developers interested. Or maybe I should say designers, as these demos are particularly good at demonstrating how allowing low-level painting to the screen unlocks just about anything you want it to.… Read article

user avatar
Shared by
Chris Coyier
Article

The Output Element

Last night I was rooting around in the cellars of a particularly large codebase and stumbled upon our normalize.css which makes sure that all of our markup renders in a similar way across different browsers. I gave it a quick skim and found styles for a rather peculiar element called <output></output> that I'd never seen or even heard of before.… Read article

Sponsored Link

Heavy images slowing down your site?

Speed is an important piece of a website's user experience. Since images account for an average of 70% or more of a webpage's weight, optimizing them is crucial to creating a faster website. That's why we created Page Weight, a tool that will diagnose your site’s most problematic images and prescribe solutions on how to optimize them.

Simply enter your URL into Page Weight and we will prepare a custom report of your images performance and what you can do … Read article

Article

Code Review Etiquette

Code reviews are a big part of writing software, especially when working within a team. It is important to have an agreed-upon etiquette for reviewing code within a team. A code review is a critique and a critique can often feel more personal than the code writing itself. A sloppy, under-researched, or insensitive code critique can cause difficulties between team members, reduce overall team productivity, and diminish code quality over time. This post will briefly define code reviews, describe some … Read article

Article

Creating Vue.js Transitions & Animations

My last two projects hurled me into the JAMstack. SPAs, headless content management, static generation... you name it. More importantly, they gave me the opportunity to learn Vue.js. More than "Build a To-Do App" Vue.js, I got to ship real-life, production-ready Vue apps.

The agency behind Snipcart (Spektrum) wanted to start using decoupled JavaScript frameworks for small to medium sites. Before using them on client projects, however, they chose to experiment on themselves. After a few of my … Read article

Link

Hexatope

It was awesome to hear Charlotte Dann on CodePen Radio the other day, who is Kickstarting a new jewelry business. The idea is that you draw your own jewelry (everything you draw looks awesome because it's on this interesting hexagon grid) and then it gets actually made. This tying together of her passions sprang to life on CodePen.… Read article

user avatar
Shared by
Chris Coyier
Article

Breaking down CSS Box Shadow vs. Drop Shadow

Drop shadows. Web designers have loved them for a long time to the extent that we used to fake them with PNG images before CSS Level 3 formally introduced them to the spec as the box-shadow property. I still reach for drop shadows often in my work because they add a nice texture in some contexts, like working with largely flat designs.

Not too long after box-shadow was introduced, a working draft for CSS Filters surfaced and, with it, a … Read article

Link

MDN Product Advisory Board

We all know and love MDN for already being the best documentation for web features out there. It looks like it's poised to get even better with Google and Microsoft both joining a new board.

Mozilla's vision for the MDN Product Advisory Board is to build collaboration that helps the MDN community collectively maintain MDN as the most comprehensive, complete, and trusted reference documenting the most important aspects of modern browsers and web standards.

Interesting none of them mentioned … Read article

user avatar
Shared by
Chris Coyier
Article

5 Tips for Starting a Front-End Refactor

For the last two weeks, I've been working on a really large refactor project at Gusto and I realize that this is the first time that a project like this has gone smoothly for me. There haven't been any kinks in the process, it took about as much time as I thought it would, and no-one appears to be mad at me. In fact, things have gone almost suspiciously well. How did this happen and what was the issue?… Read article

Sponsored Link

Sponsor: Media Temple

Media Temple is my web host here at CSS-Tricks. I still remember what it was like buying my first web hosting, pointing a domain name to it, FTPing into that server, and having the files I put there appear in the web browser. Powerful stuff, kids. Watch out or you might try to turn it into a career!

I've upgraded my server a few times since then, but it's still a pretty standard grade Media Temple server that happily hosts … Read article

Article

A Look Back at the History of CSS

When you think of HTML and CSS, you probably imagine them as a package deal. But for years after Tim Berners-Lee first created the World Wide Web in 1989, there was no such thing as CSS. The original plan for the web offered no way to style a website at all.… Read article

Link

I haven’t experienced imposter syndrome, and maybe you haven’t either

In recent years it’s become trendy to discuss how we all apparently suffer from this imposter syndrome - an inability to internalize one's accomplishments and a persistent fear of being exposed as a “fraud”.

I take two issues with this:

  • it minimizes the impact that this experience has on people that really do suffer from it.
  • we’re labelling what should be considered positive personality traits - humility, an acceptance that we can’t be right all the time, a desire to
Read article
user avatar
Shared by
Chris Coyier
Article

Prettier + Stylelint: Writing Very Clean CSS (Or, Keeping Clean Code is a Two-Tool Game)

It sure is nice having a whole codebase that is perfectly compliant to a set of code style guidelines. All the files use the same indentation, the same quote style, the same spacing and line-break rules, heck, tiny things like the way zero's in values are handled and how keyframes are named.

It seems like a tall order, but these days, it's easier than ever. It seems to me it's become a two-tool game:

  1. A tool to automatically fix easy-to-fix
Read article
Article

The Art of Comments

I believe commenting code is important. Most of all, I believe commenting is misunderstood. I tweeted out the other day that "I hear conflicting opinions on whether or not you should write comments. But I get thank you's from junior devs for writing them so I'll continue." The responses I received were varied, but what caught my eye was that for every person agreeing that commenting was necessary, they all had different reasons for believing this. … Read article

Article

A Bit on Buttons

Here's three recent things that have come across my desk in recent days regarding buttons. One, an accessibility flub that needed to be fixed. Two, an article about the fundamental differences between links and buttons but how they can look too similar for our own good. Three, the logical extreme of the button element: never use them outside of forms unless injected with JavaScript.

icon-link icon-logo-star icon-search icon-star