Entries tagged css
Filters: Type: entry × css × Sorted by date
APIs from CSS without JavaScript: the datasette-css-properties plugin
I built a new Datasette plugin called datasette-css-properties. It’s very, very weird—it adds a .css output extension to Datasette which outputs the result of a SQL query using CSS custom property format. This means you can display the results of database queries using pure CSS and HTML, no JavaScript required!
datasette-ripgrep: deploy a regular expression search engine for your source code
This week I built datasette-ripgrep—a web application for running regular expression searches against source code, built on top of the amazing ripgrep command-line tool.
[... 1362 words]What are some ways that brought your proficiency of CSS to another level?
An exercise I found useful when I first learned CSS was to implement CSS versions of the designs of popular sites. This was back when most sites still used tables for layout.
[... 76 words]Wrapping block elements in anchor tags? I know this wasn’t valid markup in HTML4 but has this changed or is the only option through JS?
This is a new thing in HTML5: “Block-level” links in HTML5
[... 43 words]Is there an alternative to media queries for responsive design?
Yes: use percentage measurements for your layout components. That way you can build a website that works on a much larger range of screen sizes. You can combine this approach with media queries—for example, you could specify that your site has a 25% wide navigation menu and a 75% wide content area on devices that are wider than 400px, but any smaller than that and it collapses to a single column layout with the menu hidden and accessible only through a menu bar icon.
[... 102 words]Why weren’t the features of Sass originally built into CSS?
This is not a straight-forward issue: CSS has a very long, complicated history. A good starting point for understanding the reluctance of the CSS working group to add variables/constants etc to CSS is this essay by Bert Bos of the W3C (entitled Why “variables” in CSS are harmful) http://www.w3.org/People/Bos/CSS...
[... 66 words]How do you know the real size of a web page?
The Google Chrome developer tools can do this, on the Network tab. Take a look at the bottom blue bar (which says “5 requests | 29.49KB transferred”)
[... 51 words]Maintainability, a.k.a. the CSS elephant
Now that even Slashdot has made the move to CSS it’s safe to say that the CSS advocacy battle is slowly being won. It’s time to talk about the elephant in the corner of the room: stylesheet maintainability.
[... 317 words]Firefox 1.5 developer highlights
Firefox 1.5 Beta 1 is out, and is the most exciting browser release in a very long time. It comes with the Gecko 1.8 rendering engine, which includes a ton of interesting new features. New in this version (unless you’ve been tinkering with the Deer Park series):
[... 719 words]3 column CSS layouts: Easier than you might think
In a recent issue of the Sitepoint Tech Times newsletter, Kevin Yank explains (in detail, with pictures) the recurring problem in CSS of trying to create a three column layout with columns of equal height and a footer spanning all three. If you don’t yet understand the problem, you will once you’ve read his article. Kevin suggests a javascript fix for the problem, but fails to mention that by using floats instead of absolutely positioned divs for the side columns a three column layout with a full width footer can be achieved without resorting to javascript. Pixy’s 3 columns, no hacks demonstrates this technique in action. In addition, the CSS-Discuss Wiki has a comprehensive list of 3 column layouts that demonstrate a number of other techniques for solving the same problem.
[... 142 words]Using bookmarklets to experiment with CSS
I’m in the middle of a whole bunch of exams at the moment, but here’s a quick tip that should make experimenting with and learning CSS a great deal easier. It involves bookmarklets. If you haven’t seen them before, bookmarklets are bookmarks that embed javascript; when you click the bookmark, the javascript is executed in the context of the currently loaded page. What that means is that in a suitably advanced browser bookmarklets can be used to modify pages, analyse their structure and do a whole host of other useful things.
[... 813 words]Fun with links
Yesterday we talked about the box model. Today we’re going to put a small part of it to work, by investigating ways of styling links. Before getting stuck in, we need to talk a bit about pseudo-selectors (also known as pseudo classes). The CSS specification defines pseudo classes as “characteristics that cannot be deduced from the document tree”, but in practise the only widely implemented psuedo selectors are those that apply to links. The key psuedo selectors for links are:
[... 810 words]Understanding the Box Model
Today’s tutorial is going to be all theory. The box model is an inevitable part of CSS, and understanding it is critical if you want to do anything remotely interesting. Like most of CSS, it’s a lot simpler than it sounds. Here it is:
[... 626 words]CSS Tutorial: feedback so far
My CSS tutorial series has been getting some fantastic feedback, both in this blog’s comments system and elsewhere. This entry will summarise the most useful feedback, acting as a kind of errata to the previous entries. Thanks to everyone who commented, there are too many to credit individually but you can see most of the points in their original format by browsing the comments attached to each entry.
[... 661 words]Quick tip: Styling blockquotes with CSS
Today’s tutorial is going to be short one, as I’m working on one last piece of coursework. This time I’m going to explain a clever CSS trick borrowed from Nick Boalch. Here’s a screenshot:
[... 475 words]Defeating IE5 CSS bugs with the help of jwz
Today’s CSS case study will be Jamie Zawinski’s LiveJournal. OK, I admit that he’s something of a tempting target after his widely publicised CSS rant last month (which was the main inspiration for this course), but there are a number of sensible reasons his site makes a good case study as well. The theme for today is “bugs in IE5 for Windows”, and jwz’s site offers two classic examples that fit this theme nicely. The first is the fact that the design is centered on the page, and the second is his choice of Verdana, a font which requires some trickery to get working well in IE5. In addition, the design of the entries seems to be a natural fit for a table based layout, so demonstrating how much simpler the code can be in CSS will hopefully turn a few heads.
[... 2979 words]Scripting.com, with added CSS
One of the aims of this course is to show how relatively simple CSS can be used to make dramatic improvements to existing sites. Today, I’ll show how CSS can be used to reduce the amount of code needed for a small part of the design of Scripting.com.
[... 1178 words]The anatomy of a stylesheet
To start my series of tutorials, I’m going to go over some of the basics of CSS. This is the boring bit: if you already know the difference between rules, properties and selectors you may want to skip this entry.
[... 1276 words]Delay to the start of my CSS tutorial series
I still plan to go ahead with a CSS tutorial series, as promised. I’m delaying the start, partly to give myself time to work out a good structure for the series, but mainly because I have a shed load of coursework due in a week today that desperately needs my full attention.
[... 56 words]Defending Structural Markup
I’ve been somewhat taken by surprise by the latest round of anti-CSS rants (initiated by JWZ, followups all over the place), mainly because I’ve been using CSS for long enough now that I’d started to forget about the legions of web developers out there who haven’t yet realised what they’re missing. Instead of getting stuck in to dissecting other people’s complaints I’m just going to lay down a few of my own core beliefs.
[... 841 words]getElementsBySelector()
Inspired by Andy, I decided to have a crack at something I’ve been thinking about trying for a long time. document.getElementsBySelector is a javascript function which takes a standard CSS style selector and returns an array of elements objects from the document that match that selector. For example:
Girlfriend as a case study
I’ve been helping my girlfriend recreate her site using CSS and structural markup. She’s new to web design and has been taking to CSS like a duck to water—as a veteran of Microsoft Word globally defined styles come to her naturally and she took very little time to cotton on to the importance of seperating presentation from content. I’ve shown her tables as well but she isn’t really interested as she sees CSS as a much better solution for general presentation. I’m hoping to help run an HTML/XHTML/CSS training course at the University early next year with a heavy emphasis on structural markup, standards compliance and accessibility so it’s great to have a guinea pig to play with :)
[... 201 words]Pretty link on Kottke
In a discussion on css-discuss recently about underlines a on links, I pointed to kottke.org as an example of clever use of CSS for links where by the link underline is a slightly later colour than the link text. Today, Jason explains the technique and the thinking behind it.
[... 59 words]