はてなブックマーク

Unless you’re an absolute beginner to front-end coding, then you’ve probably heard of npm. And npm for beginners is a subject you’re looking into. Maybe you’ve clicked through to the GitHub repo of a tool of some kind. You then noticed the installation instructions had a couple of different possibilities, including something like this: npm install some-tool In addition to that, there’s usually som

In addition to the unique property/value pairs that CSS offers, there are also a small handful of language-wide features that can come in handy, including a few that are brand new in the spec. These often go unnoticed, especially by beginners, because when CSS properties and their possible values are discussed (in tutorials, books, or even in the spec), these features are usually omitted for brevi

Most developers nowadays are recognizing that if you’re developing large applications that have different views and states, it is best to take a modular or object-oriented approach to your CSS development. When you throw media queries into the mix, however, the you can lose some of the benefits of modularity — code that’s easy to read, update, and maintain. Let’s look at different ways we can writ

By Louis Lazaris / December 10, 2012 / 8 Comments Updated: August 7, 2022 Most of us know that with the introduction of what we customarily call “CSS3”1, there have been changes and additions to CSS, compared to what we had in CSS2.1. Putting all cross-browser issues aside, I thought it would be nice to be able to document all these changes into a single post and keep it up to date. So if you want

By Louis Lazaris / November 21, 2012 / 70 Comments Updated: August 7, 2022 Last year, Microsoft announced that IE10 will not be supporting conditional comments. With their history, this is obviously a risky move. Up to now, to target quirky behaviour in IE6-9, developers have been using conditional comments, conditional classes, and other IE-specific hacks. But without conditional comments in IE10

By Louis Lazaris / November 13, 2012 / 14 Comments Updated: August 7, 2022 In most cases, when you place an element on the page in your markup, if you don’t specify any special styles, it will occupy exactly the same space that it appears to occupy visually. In other words, if you place a box sized at 200px by 200px on your page, anything you place after it in the source order, with no further sty

Back in July I wrote a post called JavaScript String Methods Reference, outlining many of the ways strings can be manipulated in JavaScript. Another area where JavaScript has a number of different methods available for use is Array manipulation, which I’ll cover in this JavaScript array methods reference. As usual, I’ll do my best to keep it simple and accurate, but if I’ve erred or if you think I

Parallax scrolling sites have been a pretty hot UX thing of late, being showcased on various blogs. Although the “ooooh! aahhh!”-ness of it all has subsided, I think this type of site is certainly a legitimate design and development option for many brands. To help you choose a JavaScript or jQuery library or plugin for doing this sort of thing (unless you’re a masochist and want to write one from

About a week or so ago, I stumbled across the Startups, This Is How Design Works website. It’s a one-page site that uses a fixed drop-down menu at the top of the screen that collapses/expands in a “table of contents” style. I thought it was kinda cool, so I wrote my own script to create this functionality, and I turned it into a jQuery plugin. Use the button below to view the demo, and read on for

Creating pure CSS tooltips with no images or JavaScript is nothing new. I’ve never personally written anything on the topic, but there are plenty of examples and tutorials to choose from. For a recent project, I had to research the concept of CSS tooltips and find something that suited my needs. I didn’t spend too many hours researching but, from what I could see, most (if not all) solutions avail

I recently looked into some options for building a slideshow presentation for display in the browser. While there are options like SlideShare and Speaker Deck that let you upload your slides in PowerPoint or PDF format to convert them to online slides, there are also a ton of options for libraries, toolkits, and APIs that let you create your own non-Flash, full screen, responsive presentations. Us

Every programming language has its good parts and its ugly parts. CSS (I know, it’s not a programming language, but whatevs) is no different. In this post, I do nothing but vent. I’ve been coding websites for almost 12 years, and I’ve been doing CSS layouts for nearly half that (yeah, I was a late bloomer). I’ve come to realize what is good and bad about CSS, and here are what I consider “the bad

By Louis Lazaris / February 28, 2012 / 7 Comments Updated: August 7, 2022 Now that the numbers for IE6 and IE7 usage are diminishing rapidly, more and more development teams are starting to weed out support for those older browsers. Most readers will probably have removed IE6 completely from the equation and soon IE7 will follow. Despite IE8 still having the highest share of any single browser ver

On a current project, I was trying to find a way to auto-resize a textarea according to some content that would be loaded in dynamically via Ajax. I didn’t know the height of the content and the textarea element doesn’t resize naturally like other HTML elements, so I needed to update the height of the element with JavaScript each time the content changed. It seemed like a simple task. After doing

“Vertical-align isn’t working!” cried the web developer. The vertical-align property is one of those features of CSS that sounds pretty self-explanatory, but can cause problems for CSS beginners. I think even many CSS veterans have had problems figuring this one out at times. In this post, I’ll try to cover it in an understandable manner. What it Does Not Do The common misconception about vertical

By Louis Lazaris / November 16, 2011 / 46 Comments Updated: August 7, 2022 Update: (May 7, 2013) There are now two specifications that make this sort of thing possible with CSS: Filters and Compositing and Blending. The other day Paul Irish posted an article that collected together responses to a question that he and Yehuda Katz asked their Twitter followers. One of the wish list items a few peopl

By Louis Lazaris / November 14, 2011 / 37 Comments Updated: August 7, 2022 This is a question that has been answered in a number of different places. Unfortunately, the answers in some instances have not been good ones. In fact, they’ve either been way too optimistic and/or presumptuous — or else just downright wrong. Also, when we use the term “HTML5”, what exactly are we referring to? HTML5 cove

Most good developers by now accept the fact that pixel-perfect cross-browser CSS is not only unnecessary, but also totally impossible. Of course, when we speak of the challenge of “cross-browser” CSS, we’re really saying “How can I make this work in Internet Explorer versions 6-8?” — because those are really the most problematic browsers. Although I’ve written before about cross-browser CSS, and I

Maybe there’s a technical term that I’m not aware of for this type of centered line-splitting heading. Whatever it’s called, I’ve used it in a project’s footer in the past, where I’ve divided the footer into sections with headers that look something like this: I wanted to create such headings but with certain rules and restrictions: No images No extra HTML Scalable (that is, you could add larger t

By Louis Lazaris / September 21, 2011 / 29 Comments Updated: August 7, 2022 You’ve probably used CSS’s border property often, and in almost all cases you’ve probably set the border-style value to “solid”, which looks exactly the same in every browser. We all know there are other values for border-style, but it’s likely you’ve never used any of them. You may have used a value of “dashed” or “dotted

I often come across instances of animations and other effects that look like perfect candidates to be switched to equivalent CSS3-based solution. I recently came across a website called 84Colors, which belongs to a freelance designer named Cristiana Bardeanu. On that site, you’ll notice there are a number of subtle animations that integrate nicely with her overall brand and design. Her animations

If you’ve seen the code for CSS border images then you’re probably familiar with the space and round values for the border-image-repeat property. Well, in the CSS spec, the well-known background-repeat property now includes those same two new values (in addition to repeat, repeat-x, repeat-y, and no-repeat — all of which most CSS developers will be thoroughly familiar with). To demonstrate what th