Showing posts with label CSS. Show all posts

Monday, 6 January 2014

The progress element

The progress HTML element was introduced in HTML5 and is used to represents the completion progress of a task. Typically it is displayed as a progress bar but this can be overridden so is up to the web developer.

Developers should make sure it is associated with a label element, especially when the label is not immediately preceding it. To support older browsers that don't support the progress element, a textual description of the progress can be included within the element.

At the time of writing this article, support is pretty good for desktop with the exception of requiring at least IE10, mobile support isn't fantastic though.

Friday, 13 December 2013

How to remove the default Blogger assets

Blogging CSS Design HTML JavaScript Optimisation

WARNING This is a tutorial designed for expert web developers, following this tutorial can break the template customiser, layout customiser and prevent widgets from being added to your blog. Your blog may also depend on them if you haven't heavily customised the template.

The default Blogger assets have plagued me ever since I started to dive deep into the Blogger template to make my design nicer and to drive the page load time down. A Blogger template requires several tags in the <head> and the editor will refuse to apply the template without them, namely this section.

<b:include data='blog' name='all-head-content'/>
<b:skin>
  <![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Some name
Designer: Some author
URL:      Some URL
----------------------------------------------- */

...A lot of CSS...

  ]]>
</b:skin>
<b:template-skin>
  <b:variable default='960px' name='content.width' type='length'/>
  <b:variable default='0' name='main.column.left.width' type='length'/>
  <b:variable default='310px' name='main.column.right.width' type='length'/>

  <![CDATA[

  ...A lot of CSS...

  ]]>
</b:template-skin>

Friday, 29 November 2013

The q element

Accessibility CSS Design HTML

The q HTML element is used to represent an inline quote. Now regular quotes ("") can represent this just fine, surrounding the quote in the q tag differs in that it explicitly indicates that the text is a quote, removing ambiguities that it could be emphasis, irony, etc.

In addition to explicitly stating that the text is a quote, it also provides a way to consistently style all quotes with minimal markup.

Usage

A quote

To use the q element, surround the quote with the tag. Ensure you do not add quotes in addition to the q tag or they will come through twice.

<p>Gandalf opened the doors to Moria by saying <q>Mellon</q>.</p>

Sunday, 24 November 2013

The samp element

Accessibility CSS Design HTML

The samp HTML element is used to represent (sample) output from a program. It has been around since HTML1, though back it was simply used to markup a sequence of literal characters.

By default samp is an inline element so it won't break the flow of the page, this means that it can be used within a block of text without any problems.

Usage

Inline sample output

The samp element can represent a program's output within a paragraph or block of text by simply wrapping the output in the tag.

<p>The browser will say <samp>404 Page Not Found</samp>.</p>

Thursday, 21 November 2013

You can now inspect pseudo-elements in the Chrome DevTools!

Chrome CSS HTML

The feature I've wanted for a very long time has finally arrived with Chromium v31; you can now inspect the :before and :after pseudo-elements within the Chrome DevTools! It is such a great quality of life change for anyone who spends a decent amount of time tinkering with CSS.

Previously you would have to find the pseudo-element styles within the styles of the parent, there would be no selection of the pseudo-element in the viewport and the width and height wouldn't display.

Monday, 18 November 2013

The kbd element

Accessibility CSS Design HTML

The kbd HTML element is used to represent some form of user input. Typically it represents keyboard input (where its name comes from) but can be used to represent any type of input that can be represented in text, such as voice commands. While it may not be familiar to most web developers it has actually been part of HTML since the first proposal for a specification (HTML1 was 1993!), though the meaning has changed quite a bit since then.

Usage

There are a few different ways to use it as defined by the HTML5 spec.

Keystrokes

The kbd element by itself generally represents a keystroke.

<p>Press the <kbd>Space</kbd> key to continue.</p>

When chaining keys together, ideally you would nest each keystroke within their own kbd element.

<p>Press <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd> to save.</p>

Saturday, 12 October 2013

CSS multi-coloured rectangular borders

CSS Design

The borders in CSS are weighted equally which means if their colours differ, the split between them will be diagonal. This is the reason that CSS triangles work the way they do. Say your design wanted a more rectangular border though, where the top and bottom extended all the way out and covered the bottom portion of the left and right borders.

You can do this a couple of ways.

Tuesday, 1 October 2013

Advanced media queries with SASS and LESS

CSS LESS SASS

SASS and LESS both have handy features to allow media queries to be written once and used throughout a project, but both have their own unique was of doing so.

Just as a refresher, here is a regular CSS media query. This one applies two styles to <img> elements, but only when the browser is in the screen category (as opposed to print) and the width of the page is less that 15ems.

@media screen and (max-width: 15em) {
  img {
    float:none;
    width:100%;
  }
}

This becomes very difficult to manage when you start using the same query in multiple places, or worse, when there is more than one type of media query. That's where our trusty pre-processors SASS or LESS come in. Not only do they allow us to write the media queries once and use everywhere, but we can place all of them together in their own isolated file to simplify future refactors.

Monday, 20 May 2013

Change the tab size on GitHub using a custom style extension

CSS GitHub

As far as I'm aware you can't change the tab size on GitHub when viewing code on the web interface (yet). While I'm sure this feature will eventually be added, in the meantime it kind of sucks to write your code using 4 character tabs and then having it mangled up when viewing on the web UI.

But don't despair, there is a fairly easy fix. We can use the tab-size CSS property to define the tab size on the page.

Saturday, 4 May 2013

Using relative directions in content on the web

Accessibility CSS HTML My projects Responsive web design

You've all seen it before, you hit a webpage with a menu on the left and somewhere in the main section it says something like "for more look at the left menu".

Sure it's fine for the majority of us, but it is pretty bad practice for a couple of accessibility reasons. Firstly there is no concept of left and right for people using assistive technologies like JAWS to read the page for them. Secondly what if your website is responsive in some way or your content appears in different forms like an app or mobile site, you need to ask yourself if it is really left or right in all these cases.

Saturday, 6 April 2013

Aligning and element with background-size:cover

CSS HTML JavaScript jQuery Stack Exchange

The CSS property background-size:cover is incredibly useful but due to the nature of it resizing in different directions, it's difficult to pinpoint where a particular part of the image is on the background at any given time. Difficult but not impossible of course.

To do this you first need to understand how background-size:cover works. Basically the image will fill the screen at all times by stretching out while maintaining aspect ratio. This means that unless the window is perfectly sized to fit the image, either the image is going to be cut off at the top and bottom edges, or the left and right edges.

Given this we can calculate the scale of the image and the x or y offset to find out the actual coordinates of the target location. I've created a little example using Google's logo that positions a red dot inside the red 'o' character. Resizing the window will keep the red dot inside the 'o' no matter how you resize the window.

Tuesday, 19 March 2013

A clearfix without additional markup

CSS HTML

For a long time we've been forced to clear floats in a manner something like this:

<div class="float">a</div>
<div class="float">b</div>
<div class="float">c</div>
<div class="clear"></div>

.float {
    float:left;
}
.clear {
    clear:both;
}

Fortunately with the usage of IE7 declining we can finally embrace the use of pseudo-elements. There have been a few different clear fixes using pseudo elements popping up around the web over the last few years, this one is my favourite. It is applied to a wrapper around the floated elements by creating a pseudo-element after the wrapper and clearing there.

Saturday, 16 March 2013

Headers with a vertically-centered horizontal line

CSS Design

Here's a pretty good method of creating a header that has a vertically-centered, horizontal line on the right-hand side of the header. There are a couple of caveats though: it requires a little JavaScript to set an attribute on the headings; and it cannot be used on tiled backgrounds.

Monday, 11 March 2013

Triangles in CSS

CSS Design HTML SASS

Creating triangles with CSS is a pretty good way to reduce the amount of image dependencies within an application. They're a bit tricky to get your head around at first but once you understand them it's really easy.

Drawing a triangle

Lets say we are constructing a triangle to use as an up arrow, the first thing to do is to create an element with a size of 0x0. A bottom border is then applied to element with the colour set to the colour you want the triangle to be. Then we add left and right borders to the element with the colour of transparent.

.triangle {
    border-bottom:15px solid #000;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    width:0;
    height:0;
}

This is what we are given:

Saturday, 12 January 2013

Blog redesign #2

Blogging CSS Design HTML Responsive web design SASS

I only just redesigned the blog back in September, but something has been bugging me since around a week after I did it. The readability completely sucked, I found myself preferring Google Reader or the Blogger backend over reading from the blog itself! Not good...

So I spent a bit of time here and there over the last month or so getting the design just right and then ramping up towards the end with the implementation. I used SASS this time as the changes being made were pretty significant. Here are the results.

Thursday, 27 December 2012

Apply fonts based on language using CSS3

CSS Natural language

You can apply fonts based on unicode character codes using the unicode-range CSS3 rule. Fonts with a unicode-range rule will only target the specified range and fall back to other fonts with characters not in the range. Multiple ranges can be used by separating them with a comma.

@font-face {
  font-family: FancyJapanese;
  src: local('KaiTi');
  unicode-range: U+4E00-9FBF, U+3040-30FF; /* Kanji, Kana */
}

@font-face {
  font-family: FancyKorean;
  src: local('Batang');
  unicode-range: U+AC00-D7AF;
}

.serif {
  font-family: FancyJapanese, FancyKorean, "Times New Roman", Times, serif;
}

Here's an example, firstly with a regular block:

English 日本語 한국어

And now with the rules serif class applied:

English 日本語 한국어

Saturday, 17 November 2012

Advanced CSS selectors

CSS

A continuation of my post CSS selectors you must know, this one is going to look at the more advanced selectors available to us. Each section will first describe what is selected and then provide an example first with the CSS and then the HTML if applicable, the selected elements will be marked.

`S₁ ~ S₂`

This selects all sibling elements of S₁ matching S₂.

h2 ~ p
{ }

<h2>Heading</h2>
<p>Some paragraph.</p>
<p>Another paragraph.</p>

Monday, 15 October 2012

Web Platform Docs

CSS HTML JavaScript

So www.webplatform.org was released 5 days ago and people seem to be really keen to get it up and going. For those of you who don't know Web Platform was created with the following goal in mind, taken from the welcome blog post.

"The goal of this site is to be the place to come for answers to your trickiest (and simplest) development and design questions about the Open Web Platform."

Sunday, 14 October 2012

Inspecting :hover styles in Chrome

Chrome CSS Debugging

Hover styles can be hard to develop if you don't know how to view them in the inspect window. Here is a handy little trick that allows you to view the styles.

Inspect the element as normal
Hover your mouse over the element again
Press the up arrow followed by the down arrow

This will refresh the inspector getting the styles of the element in the current state, when your mouse was hovering over the element.

Thursday, 11 October 2012

Button slide down hover effect

CSS SASS

Here's a cool little effect that can be applied to buttons/images/etc. on hover, it slides the button down using top/bottom margins and fades the button slightly into the background. Subtle effects like this really add to a web site in my opinion.

button {
  /* Center */
  display:block;
  margin:0 auto;
  
  /* Button */
  background-color:#484;
  border:0;
  padding:20px;
  
  /* Text */
  text-transform:uppercase;
  font-weight:bold;
  font-family:Calibri, Arial;
  font-size:150%;
  letter-spacing:2px;
  color:#FFF;
  
  transition:all .3s ease;
  -o-transition:all .3s ease;
  -moz-transition:all .3s ease;
  -webkit-transition:all .3s ease;
  
  &:hover {
    $slide-amount:3px;

    cursor:pointer;
    opacity:.85;
    margin-top:$slide-amount;
    margin-bottom:-$slide-amount;
  }
}

Growing with the Web

Featured posts

Usage

A quote

Usage

Inline sample output

Usage

Keystrokes

Drawing a triangle

S1 ~ S2

`S₁ ~ S₂`