This site is dedicated to all things I see and that I think are interesting to publish almost always are other very smart people.

Posts tagged “css

What is Code?

An epic piece by Paul Ford. I’ll just pick one fun quote because why not.

There are 11 million professional software developers on earth, according to the research firm IDC. (An additional 7 million are hobbyists.) That’s roughly the population of the greater Los Angeles metro area. Imagine all of L.A. programming. East Hollywood would be for Mac programmers, West L.A. for mobile, Beverly Hills for finance programmers, and all of Orange County for Windows.

What do you think front end developers would occupy? I can’t tell if it’s the shed in the back of the Chick-fil-a on Sunset Blvd or half the dang town.

Direct Link to ArticlePermalink

What is Code? is a post from CSS-Tricks

Advertisements

Flexbox Bar Navigation Demo

100+ CSS-Tricks by Chris Coyier  

Someone wrote in to me asking how to create a simple bar navigation with icons. This is a pretty simple layout thing that could be accomplished loads of different ways. List items as inline-block probably makes the most sense in general.

But I’ve been enjoying tinkering with flexbox, so I decided to toss it together with that, and it made for a pretty educational example I think.

 

Here it is:

See the Pen Bar Navigation with Flexbox and SVG icons by Chris Coyier (@chriscoyier) onCodePen.

Flexbox makes it easy to align the items however you want:

Flexbox makes it easy to allow the menu items to take up as much space as they need, without specifying any exact numbers:

But if you want to apply exact numbers, you can:

Flex items can wrap and the properties can change with media queries:

Flex items are easy to align how you want, even vertically, even with centering:

In the demo, feel free to turn on the outlines to see how the boxes align themselves.

I realize not everyone can use flexbox on everything they work on. Yadda yadda browser support, clients, etc. Some people can, on some projects. After playing with it for stuff like this, I think it becomes clear how important it is going to become.

 

Flexbox Bar Navigation Demo is a post from CSS-Tricks


Link

If Kerouac wrote JavaScript (and Dr Johnson wrote CoffeeScript)

If Kerouac wrote JavaScript (and Dr Johnson wrote CoffeeScript)

Kerouac is renowned for his spontaneous, stream-of-consciousness approach to writing, supposedly delivering some works at a single sitting. Since planning is alien to Kerouac’s process, he has no use for functions. The above code can only return the factorial of 43. If you want the factorial of another number, you’ll need to rewrite the code.

Notice how comments are virtually indistinguishable from code; to Kerouac it’s all the same – one long, rhapsodic outpouring.

Samuel Johnson

“When a man is tired of JAVA-SCRIPT, he is tired of LIFE”


Link

Almanac

Almanac

CSS Selected & Properties


Stairway Navigation (A jQuery Plugin?) by Chris Coyier

On a whim the other day I thought I’d build out an idea for navigation I had. It’s nothing but a visual effect in which the hovered (or active) navigation item becomes the tallest “stair” and other items before and after it step down. It’s simple, but it’s not something you see very often. Probably for one major reason: you can’t select “previous” elements in CSS.

 

stairwaynav View Demo 

You can select “next” elements in CSS. You’d use the general sibling combinator  to get all the next elements or theadjacent sibling combinator  to get the very next one (which you could chain). Neither of those allow you to get the previous elements which, as you can see by the image above, is needed to do this effect justice.

In pseudo code, we’re trying to do this:

/* Not Real Code */

a:hover { /* top stair stuff */ }

a:hover-1,
a:hover+1 { /* second stair stuff *}

a:hover-2,
a:hover-2 { /* third stair stuff *}

Rather than get too tricky for our own good with CSS, let’s rely on a technology that can select previous elements: jQuery. jQuery has a .prev()  function (and a few other related functions) that we can use to get what we need. Our psuedo code would become more like this real code:

$("nav a").hover(function() {
  $(this)
   .addClass("stair-1")
   .prev()
     .addClass("stair-2")
     .prev()
       .addClass("stair-3")
       .end()
     .end()
   .next()
     .addClass("stair-2")
     .next()
       .addClass("stair-3");  
});

Presumably we’d clear all classes on all nav elements on a mouseleave event as well. That means to be most efficient we’d already have a pointer to all those elements.

var navEls = $("nav a");

navEls
  .on("mouseenter", function() {
     // add classes as above
  })
  .on("mouseleave", function() {
     navsEls.removeClass("stair-1 stair-2 stair-3);
  })

So now that we have a set, we might as well get a bit more efficient. Using .next() and .prev() means a lot of jQuery going back out to the DOM to figure out what to select (I think, correct me if I’m wrong there). Rather than do that, we can just select based on the set we already have selected based on it’s position within that set. The .index() function helps us figure that out and .eq() let’s us grab the element based on its index.

navEls
  .mouseenter(function() {

    $(this).addClass("stair-1");

    var index = $(this).index();
    
    allLinks.eq(index+1).addClass("stair-2");
    allLinks.eq(index-1).addClass("stair-2");

    allLinks.eq(index+2).addClass("stair-3");
    allLinks.eq(index-2).addClass("stair-3");

  })

That’ll do the trick.

CSS does the design work

Notice that all the jQuery is doing is adding and removing classes. That’s how UI and JavaScript should hang out the majority of the time. JavaScript is in charge of knowing about and changing states – CSS does the work of making the page look different.

The entire “stairway” visual effect comes in now, when we apply styles based on those classes.

.stair-1 {
  transform:
    scale(1.10)
    translateX(24px)
  box-shadow: 0 0 10px rgba(black, 0.75);
  z-index: 3;
}
.stair-2 {
  transform:
    scale(1.07)
    translateX(12px)
  box-shadow: 0 0 10px rgba(black, 0.5);
  z-index: 2;
}
.stair-3 {
  transform:
    scale(1.04)
    translateX(4px)
  z-index: 1;
}

The “top” stair (stair-1) enlarges, moves to the right, and has a deep shadow. Each of the subsequents stairs does a bit less of all those things. You could also change colors here or do anything else that would make sense to your own application.

A jQuery Plugin?

I put those words in the title of this post because I think this is interesting territory.

Does this kind of thing “deserve” to be pluginized? For one thing – this is heavily dependent on CSS. Calling it a “Stairway Navigation” plugin isn’t descriptive of what the actual jQuery code is doing. It also doesn’t make use of any of jQuery’s built-in features that are built for this, like it’s ability to animate things – we instead leave that to CSS.

Anyway – we are going to pluginize it because it makes things more interesting.

Plugin Options

We’ll make it the simplest set of options possible: how many stairs do you want stepping down? You’ll call it on a navigation element that contains only anchor links:

$(".main-nav").stairwayNav({
  stairs: 2
});

Then in the plugin, we make sure we have access to a “stairs” variable that is either the passed in value or some default.

$.fn.stairwayNav = function(options) {
  
  var defaults = {
     stairs: 3
  };
  this.options = $.extend({}, defaults, options);
  var stairs = this.options.stairs;

I love that pattern. It means we don’t have to do any fancy crap checking if the object contains certain keys and ensuring they aren’t blank and blah blah. If you pass in a value for “stairs”, that’s what ends up in the options object. If you don’t, it gets a default value. Cool.

Looping

To honor that option, we now just run a little for loop as many times as there are stairs. We adjust the index value the more iterations it runs, just never selecting negative values.

navEls
  .mouseenter(function() {
    $(this).addClass("stair-1");
    var index = $(this).index(), i, bef, aft;
    for(i = 1; i < stairs; i++) {
      
      bef = index - i;
      aft = index + i;
     
      allLinks.eq(aft).addClass("stair-" + (i+1));
      if (bef > 0) {
        allLinks.eq(bef).addClass("stair-" + (i+1));
      }
    }   
  })

Stairway Navigation Demo

Here is the demo on CodePen .

 

Stairway Navigation (A jQuery Plugin?)  is a post from CSS-Tricks

 

Enhanced by Zemanta

About normalize.css

…things by Nicolas Gallagher

Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.

Normalize.css is currently used in some form by Twitter Bootstrap,HTML5 BoilerplateGOV.UKRdioCSS Tricks, and many other frameworks, toolkits, and sites.

Overview

Normalize.css is an alternative to CSS resets. The project is the product of 100′s of hours of extensive research by @necolas and @jon_neal on the differences between default browser styles.

The aims of normalize.css are as follows:

  • Preserve useful browser defaults rather than erasing them.
  • Normalize styles for a wide range of HTML elements.
  • Correct bugs and common browser inconsistencies.
  • Improve usability with subtle improvements.
  • Explain the code using comments and detailed documentation.

It supports a wide range of browsers (including mobile browsers) and includes CSS that normalizes HTML5 elements, typography, lists, embedded content, forms, and tables.

Despite the project being based on the principle of normalization, it uses pragmatic defaults where they are preferable.

Normalize vs Reset

It’s worth understanding in greater detail how normalize.css differs from traditional CSS resets.

Normalize.css preserves useful defaults

Resets impose a homogenous visual style by flattening the default styles for almost all elements. In contrast, normalize.css retains many useful default browser styles. This means that you don’t have to redeclare styles for all the common typographic elements.

When an element has different default styles in different browsers, normalize.css aims to make those styles consistent and in line with modern standards when possible.

Normalize.css corrects common bugs

It fixes common desktop and mobile browser bugs that are out of scope for resets. This includes display settings for HTML5 elements, correctingfont-size for preformatted text, SVG overflow in IE9, and many form-related bugs across browsers and operating systems.

For example, this is how normalize.css makes the new HTML5 searchinput type cross-browser consistent and stylable:

/*
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in S5, Chrome on OS X
 */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

Resets often fail to bring browsers to a level starting point with regards to how an element is rendered. This is particularly true of forms – an area where normalize.css can provide some significant assistance.

Normalize.css doesn’t clutter your debugging tools

A common irritation when using resets is the large inheritance chain that is displayed in browser CSS debugging tools.

A common sight in browser debugging tools when using a CSS reset

This is not such an issue with normalize.css because of the targeted styles and the conservative use of multiple selectors in rulesets.

Normalize.css is modular

The project is broken down into relatively independent sections, making it easy for you to see exactly which elements need specific styles. Furthermore, it gives you the potential to remove sections (e.g., the form normalizations) if you know they will never be needed by your website.

Normalize.css has extensive documentation

The normalize.css code is based on detailed cross-browser research and methodical testing. The file is heavily documented inline and further expanded upon in the GitHub Wiki. This means that you can find out what each line of code is doing, why it was included, what the differences are between browsers, and more easily run your own tests.

The project aims to help educate people on how browsers render elements by default, and make it easier for them to be involved in submitting improvements.

How to use normalize.css

First, download normalize.css from GitHub. There are then 2 main ways to make use of it.

Approach 1: use normalize.css as a starting point for your own project’s base CSS, customising the values to match the design’s requirements.

Approach 2: include normalize.css untouched and build upon it, overriding the defaults later in your CSS if necessary.

Closing comments

Normalize.css is significantly different in scope and execution to CSS resets. It’s worth trying it out to see if it fits with your development approach and preferences.

The project is developed in the open on GitHub. Anyone can report issues and submit patches. The full history of the project is available for anyone to see, and the context and reasoning for all changes can be found in the commit messages and the issue threads.

Related reading

Detailed information on default UA styles: WHATWG suggestions for rendering HTML documentsInternet Explorer User Agent Style Sheets andCSS2.1 User Agent Style Sheet Defaults.

Translations

Enhanced by Zemanta

Another CSS image replacement technique

…things by Nicolas Gallagher

A new image replacement technique was recently added to the HTML5 Boilerplate project. This post explains how it works and how it compares to alternative image replacement techniques.

Here’s the CSS behind the recent update to the image replacement helper class in HTML5 Boilerplate. It has also made its way into the Compassframework.

.ir {
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

What does each declaration do?

  • font:0/0 a – a shorthand property that zeros out the font size and line-height. The a value acts as a very short font-family (an idea taken from theBEM implementation of this method). The CSS validator complains that using 0/0 in the shorthand font property is not valid, but every browser accepts it and this appears to be an error in the validator. Usingfont:0px/0 a passes validation but it displayed as font:0/0 a in the code that the validator flags as valid.
  • text-shadow:none – makes sure that any inherited text shadow is removed for the text. This prevents the chance of any text shadow colors showing over the background.
  • color:transparent – needed for browsers than don’t completely crush the text to the point of being invisible. Safari 4 (extremely rare) is an example of such a browser. There may also be mobile browsers than require this declaration. IE6/7/8 don’t recognise this value for color, but fortunately IE7/8 don’t show any trace of the text. IE6 shows a faint trace.

In the HTML5 Boilerplate image replacement helper, we’ve also removed any border and background-color that may be on the element. This makes it easier to use the helper class on elements like button or with links that may included background or border properties as part of a design decision.

Benefits over text-indent methods

The new technique avoids various problems with any text-indent method, including the one proposed by Scott Kellum to avoid iPad 1 performance problems related to large negative text indents.

  • Works in IE6/7 on inline-block elements. Techniques based on text indentation are basically “broken”, as shown by this test case:http://jsfiddle.net/necolas/QZvYa/show/
  • Doesn’t result in any offscreen box being created. The text-indentmethods result in a box being drawn (sometimes offscreen) for any text that have been negatively or positively indented. It can sometimes cause performance problems but the font-based method sidesteps those concerns.
  • No need to specify a text-alignment and hide the overflow since the text is crushed to take up no space.
  • No need to hide br or make all fallback HTML display:inline to get around the constraints of using a text indentation. This method is not affected by those problems.
  • Fewer styles are needed as a result of these improvements.

Drawbacks

No image replacement hack is perfect.

  • Leaves a very small trace of the text in IE6.
  • This approach means that you cannot use em units for margins on elements that make use of this image replacement code. This is because the font size is set to 0.
  • Windows-Eyes has a bug that prevents the reading of text hidden using this method. There are no problems with all other screenreaders that have been tested. Thanks to @jkiss for providing these detailed results and to@wilto for confirming this technique works for JAWS 12 in IE 6/7/8 and Firefox 4/5/6.
  • Like so many IR methods, it doesn’t work when CSS is loaded but images are not.
  • Text may not be hidden if a visitor is using a user style sheet which has explicitly set important font-size declarations for the element type on which you have applied the IR class.

It’s worth noting that the NIR image replacement technique avoids these drawbacks, but lacks support in IE6/7.

Closing comments

I’ve been using this technique without significant problems for nearly a year, ever since Jonathan Neal and I used it in a clearfix experiment. The BEM framework also makes use of it for their icon components. The core idea was even proposed back in 2003 but the browser quirks of the day may have prevented wider use.

If you come across any problems with this technique, please report them at the HTML5 Boilerplate GitHub issue tracker and include a test case when appropriate.

Translations

 

Enhanced by Zemanta

Cascading Style Sheets

Partial CSS software list

Nearly all browsers nowadays support CSS and many other applications do, too. To write CSS, you don’t need more than a text editor, but there are many tools available that make it even easier.

Of course, nearly all software has bugs. And some programs are further ahead implementing the latest CSS modules than others. Various sites describe bugs and work-arounds.