small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<a href="http://ift.tt/2pn3Kzt">CSS-Tricks</a> | Steven Estrella 
Ordered lists are among the oldest and most semantically rich elements in HTML. Anytime you need to communicate sequence or ranking, the <code>&lt;ol&gt;</code> tag is there to help. The default appearance of the <code>&lt;ol&gt;</code> tag presents numbers next to each item in the list. You can use the <code>list-style-type</code> property in CSS to change the default to use Roman numerals or the letters of the alphabet. If you are feeling exotic, you can even use numbering from other cultures like Hebrew or Greek. The full list of available values is well-documented and easy to use. 
Recently, I saw an opportunity to use dice in place of numbers for several ordered lists explaining the features of an HTML5 game I created called <a href="http://www.bopzee.com">Triple Score Bopzee</a>. To accomplish my goal, I first experimented with a now-familiar technique for using a small image file as the background for the <code>li::before</code> selector in a list. One change I made to the usual procedure is that I decided to avoid <code>list-style-type: none</code> in favor of using <code>list-style-type: decimal</code> and setting <code>list-style-image</code> to a 1×1 transparent GIF. That small change helps the page pass accessibility tests because screen readers will still see the list as a valid numbered list.
I created a Pen to demonstrate this classic technique using GIFs of numbers that contain the balls used in four major sports.
See the Pen <a href="http://ift.tt/2oPb9ZL">Ordered List with Images</a> by Steven Estrella (<a href="http://ift.tt/2p0Gi8w">@sgestrella</a>) on <a href="http://codepen.io">CodePen</a>.
This technique would have worked for my needs on the bopzee web site but I got curious about how I could do it without using any images. The answer was to use the Unicode symbols \2680 through \2685 for the six dice. I created a class selector called &#8220;dicey&#8221; and used the nth-child and before pseudo selectors to position and choose the Unicode character for each list item. I added a link to the <a href="http://ift.tt/1unRGLi">Normalize.css library</a> to smooth out the subtle browser differences. 
Here is the Pen for the completed dice list:
See the Pen <a href="http://ift.tt/2p0GiW4">Ordered Lists with Unicode Dice</a> by Steven Estrella (<a href="http://ift.tt/2p0Gi8w">@sgestrella</a>) on <a href="http://codepen.io">CodePen</a>.
So for a list like this:
<pre><code>&lt;ol class="dicey"&gt; 
 &lt;li&gt;I rolled a one.&lt;/li&gt; 
 &lt;li&gt;I rolled a two.&lt;/li&gt; 
 &lt;li&gt;I rolled a three.&lt;/li&gt; 
 &lt;li&gt;I rolled a four.&lt;/li&gt; 
 &lt;li&gt;I rolled a five.&lt;/li&gt; 
 &lt;li&gt;I rolled a six.&lt;/li&gt; 
&lt;/ol&gt;</code></pre>
This was the trick:
<pre><code>/* Still use a decimal based list for a11y */ 
ol { 
 margin-left:40px; 
 list-style:decimal url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); 
} 
 
.dicey li:nth-child(1n):before {position:absolute;left:-1em;} 
 
/* Actually set markers with pseudo element unicode */ 
.dicey li:nth-child(1):before {content: "\2680";} 
.dicey li:nth-child(2):before {content: "\2681";} 
.dicey li:nth-child(3):before {content: "\2682";} 
.dicey li:nth-child(4):before {content: "\2683";} 
.dicey li:nth-child(5):before {content: "\2684";} 
.dicey li:nth-child(6):before {content: "\2685";}</code></pre>
Initially, I did not specify the font that would display the Unicode symbols. The result was not bad because today every modern web browser and web enabled device has access to at least one font that contains the necessary symbols from the Unicode block called &#8220;Miscellaneous Symbols.&#8221; There was some variation in appearance but it was quite tolerable. But I knew that if I wanted real control, I would have to find a free web font. I identified a font called DejaVu that would work by looking through the supported fonts list in <a href="http://ift.tt/2oP2c2t">the table of glyphs</a> for the Miscellaneous Symbols block.
Once I knew the font name, I was able to <a href="http://ift.tt/2p0Gjt6">create a WebFont kit at Font Squirrel</a>. When creating a WebFont kit, it is important to choose the &#8220;No subsetting&#8221; option to be sure the fonts contain all the Unicode goodness you need for your icons. Or if you are concerned about file size, you can download the original TrueType or OpenType font, then use Font Squirrel&#8217;s WebFont generator in expert mode to include only the Unicode range 2600 to 26FF which captures all characters in the Unicode block called &#8220;Miscellaneous Symbols.&#8221;
Once you get started with Unicode, the fun never stops. I spent way too much time exploring the many icons that are part of the DejaVu font (<a href="http://ift.tt/2oPbawN">complete list</a>). There I found icons for playing card suits, astrological signs, arrows, bullets, musical symbols, geometric shapes, and a whole host of squiggles I can&#8217;t begin to name. So I took some of my favorites and created a Pen containing several different kinds of lists.
The complete Pen:
See the Pen <a href="http://ift.tt/2p0Gkxa">Ordered Lists with Unicode Symbols</a> by Steven Estrella (<a href="http://ift.tt/2p0Gi8w">@sgestrella</a>) on <a href="http://codepen.io">CodePen</a>.
<h3>What about unordered lists?</h3>
You can give your <code>&lt;ul&gt;</code> elements the same great Unicode love using a modified form of this technique. Here is a Pen to get you started:
See the Pen <a href="http://ift.tt/2oP4KxO">Unordered List with Unicode Bullets</a> by Steven Estrella (<a href="http://ift.tt/2p0Gi8w">@sgestrella</a>) on <a href="http://codepen.io">CodePen</a>.
<h3>What about the future?</h3>
There is a new CSS rule called <code>@counter-style</code> which will allow us more easily to create custom counter styles for ordered lists, specifying the symbols to be used, the range of the list, and lots of other options. The CSS Counter Styles Level 3 specification is now a Candidate Recommendation at the W3C but as of May 2017 only FireFox supports it (with some issues). I would expect that Chrome, Edge, and Safari will add support sometime soon but the final version of Internet Explorer (version 11) will likely never have it. So if you have to support that browser, you will be stuck with tricks like the one described on this post until people stop using IE11 (perhaps the year 2020?). 
Note that the <code>@counter-style</code> rule does not provide any way to style the counter symbol using CSS. So even when it is adopted by all browsers, there may be use cases for alternative solutions like the one presented here. You can read more about <a href="http://ift.tt/1E5c3i1">@counter-style on MDN</a>. Here is a pen with a demonstration. 
Be sure to use FireFox to see the effect:
See the Pen <a href="http://ift.tt/2oPjywt">@counter-style demo (FireFox only as of May 2017)</a> by Steven Estrella (<a href="http://ift.tt/2p0Gi8w">@sgestrella</a>) on <a href="http://codepen.io">CodePen</a>.
<h3>On the shoulders of giants</h3>
We all learn from the work of others and I wish to credit the work of several writers whose articles I found informative when preparing this post.
<ul>
<li>Jose Vargas: <a href="http://ift.tt/1jrc0DZ">Ordered List CSS Styles</a></li>
<li>Roger Johannson: <a href="http://ift.tt/kWjVGV">Styling Ordered List Numbers</a></li>
<li>David McFarland: <a href="http://ift.tt/2p0C3tS">Custom List Numbers</a></li>
<li>Chris Coyier: <a href="http://ift.tt/2fs8LDP">Base 64 Encode of 1x1px Transparent GIF</a></li>
<li>Chris Coyier: <a href="http://ift.tt/1Gp6IaV">Numbering in Style</a></li>
</ul>
Here is a Pen with the unordered list above using several different icon styles!
See the Pen <a href="http://ift.tt/2oPe3xC">List of Credits with Unicode Bullets</a> by Steven Estrella (<a href="http://ift.tt/2p0Gi8w">@sgestrella</a>) on <a href="http://codepen.io">CodePen</a>.
<hr>
<a href="http://ift.tt/2pn3Kzt">Ordered Lists with Unicode Symbols</a> is a post from <a href="https://css-tricks.com">CSS-Tricks</a>

Ordered Lists with Unicode Symbols

Ordered Lists with Unicode Symbols

Top Stories

`Top Stories`