CSS Tricks

If you have, say, 20 posts/pages on your WordPress site, the search functionality that is baked right into your self-hosted WordPress site will probably do a great job. Search is a pretty cool feature to ship with WordPress, truth be told. But as a site grows, you'll find limits. How it works behind the scenes is a touch over my head, but as I understand it, it does a MySQL LIKE query on your post titles and post content. It tries its best to order by relevance (like if it finds an exact sentence match), then largely orders by date. If search is super important to your site (here on CSS-Tricks, on-site search gets used a ton) you'll probably look for other options. TLDR: Jetpack Search is quite good out of the box, customizable, and requires very little effort. A quick jaunt through a de...

Hyperlinks are the oldest and the most popular feature of the web. The word hypertext (which is the ht in http/s) means text having hyperlinks. The ability to link to other people’s hypertext made the web, a web — a set of connected pages. This fundamental feature has made the web a very powerful platform and it is obvious that the world of apps needs this feature. All modern platforms support a way for apps to register a URI (custom protocol) and also have universal links (handling web links in an app). Let’s see why we’d want to take advantage of this feature and how to do it. Why have app links at all? Creating URIs that apps can open provides a unique set of benefits. A URL encapsulates the entire state of the webpage (it used to before the advent of Single Page Applications (SPAs) h...

Over the past six months, I've become increasingly interested in the topic of web sustainability. The carbon footprint of the Internet was not something I used to give much thought to, which is surprising considering my interest in environmental issues and the fact that my profession is web-based. The web in a warming world As a brief recap, I attended MozFest in London last year. In between sessions, I was scanning a noticeboard to see what was coming up, and I spotted a session entitled, "Building a Planet-Friendly Web." I felt a little dumbstruck. What on Earth was this going to be about? I attended the session and the scales fell from my eyes. In what now seems obvious — but at the time was a revelation — I learned of the colossal energy demand of the Internet. This demand makes it th...

Say you declared a grid like this: body { display: grid; grid-template-columns: min-content 1fr; grid-template-rows: min-content auto min-content; } This depends on content, for sure, but how it's likely to play out is like this: +---+-------------+ | | | | | | +-----------------+ | | | | | | | | | | | | | | | | | | +-----------------+ | | | +---+-------------+ That's really easy to draw out quick in ASCIIFlow Infinity. Now you want to place elements in that grid, and arguably the easiest way to do that is to specify the grid rows/columns they should start/end at. /* grid-area: row-start / column-start / row-end / column end */ .logo { grid-area: 1 / 1 / 2...

The CSS Paint API is extremely exciting, not only for what it is, but what it represents, which is the beginning of a very exciting time for CSS. Let’s go over what it is, why we have it and how to start using it. What is the CSS Paint API? The API is just one part of a whole suite of new specifications all under the umbrella of what is known as CSS Houdini. Houdini, in essence, gives developers lower level access to CSS itself. No kidding. The CSS Paint API specifically allows you to call a paint() function wherever you would normally write a value where an image is expected. A common example is the background-image property, where you might use the url() function to a link to an image file, like this: area { background-image: url('assets/myimage.jpg'); } The CSS Paint API allows you t...

This is the third and final part in a three-part series about using CSS grid safely in Internet Explorer 11 (IE11) without going insane. In Part 1, I covered some of the common misconceptions that people have about IE11’s native CSS grid implementation. In Part 2, I showed the world how easy it actually is to write IE-friendly CSS grid code. Today, I’m going step away from CSS grid for a moment to show you a flexbox technique that replicates basic CSS grid auto-placement functionality. This CSS grid replica will even look like a grid-gap has been applied to it. I need to be super clear though: this is not about how to make actual CSS grid auto-placement work in IE. Article Series: Debunking Common IE Grid Misconceptions CSS Grid and the new Autoprefixer Faki...

Holy heck it feels like the last year has flown by! Longtime readers will remember that the fourth of July is CSS-Tricks birthday and we blog it each year. We turned 10 last year, and now we welcome our first palindromic number birthday. Huge thank you First, as ever, thank you for being part of CSS-Tricks. However you end up here, we hope that we're useful to you, know that we're always trying to be even more useful to you, and know that you make the site possible. Can we ask you some questions? The whole point of this survey is to understand you better and use that understanding to make choices that serve you better. That's it! It's super helpful to us and totally anonymous. Take the CSS-Tricks Reader Survey A new design is coming Hate to be a tease, as there is nothing to show you ye...

The web community has, for the most part, been a spectacularly open place. As such, a lot of the best development techniques happen right out in the open, on blogs and in forums, evolving as they’re passed around and improved. I thought it might be fun (and fascinating) to actually follow this creative exchange all the way through. To take a look at a popular CSS trick, the clearfix, and find out exactly how a web design technique comes to be. The clearfix, for those unaware, is a CSS hack that solves a persistent bug that occurs when two floated elements are stacked next to each other. When elements are aligned this way, the parent container ends up with a height of 0, and it can easily wreck havoc on a layout. All you might be trying to do is position a sidebar to the left of your main ...