{"id":1122,"date":"2008-10-07T05:45:43","date_gmt":"2008-10-07T12:45:43","guid":{"rendered":"http:\/\/css-tricks.com\/?p=1122"},"modified":"2011-02-07T12:23:53","modified_gmt":"2011-02-07T19:23:53","slug":"links-of-interest-51","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/links-of-interest-51\/","title":{"rendered":"Links of Interest"},"content":{"rendered":"

Automatic Numbering with CSS Counters<\/h3>\n

The CSS 2.1 spec makes inserting counters into content possible. This has always been possible with ordered lists, but this counter system is much more robust allowing you to insert counters on any type of page element, set up incrementation rules, resetting rules, and more. The Opera Dev Blog has a nice article on how to do it.<\/a> Works in current versions of all the major good browsers, and is slated to work in IE 8.<\/p>\n

 <\/p>\n

Typographic Marks Unknown<\/h3>\n

Familiar to most, yet understood by few<\/a>. Things like the Pilcrow ( ¶ ) and the Section Sign ( § ).<\/p>\n

<\/p>\n

 <\/p>\n

Embarrassing CSS Mistakes<\/h3>\n

David Walsh goes all confessional and shares his Worst CSS Mistakes<\/a>. Pretty funny stuff like setting font size with the star selector, then trying to make some text larger and having to fight against it with all nested elements.<\/p>\n

 <\/p>\n

Utilu Silent Setup for Mozilla Firefox<\/h3>\n

There is a comment thread here<\/a> which started some interesting discussion about this “Utilu Silent Setup for Mozilla Firefox”. Long story short, it’s a browser sniffer that can be added to sites which will download and install Firefox and then open up the page they were looking at in Firefox – all behind the scenes. On one hand, this is trying to be help people have a better browsing experience and may reach people in a way that designers complaining to each other never will. On the other hand, this feels like scary and fairly intrusive behavior.<\/p>\n","protected":false},"excerpt":{"rendered":"

Automatic Numbering with CSS Counters The CSS 2.1 spec makes inserting counters into content possible. This has always been possible with ordered lists, but this counter system is much more robust allowing you to insert counters on any type of page element, set up incrementation rules, resetting rules, and more. The Opera Dev Blog has […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":313891,"url":"https:\/\/css-tricks.com\/displaying-the-current-step-with-css-counters\/","url_meta":{"origin":1122,"position":0},"title":"Displaying the Current Step with CSS Counters","date":"July 7, 2020","format":false,"excerpt":"Say you have five buttons. Each button is a step. If you click on the fourth button, you're on step 4 of 5, and you want to display that. This kind of counting and displaying could be hard-coded, but that's no fun. JavaScript could do this job as well. But\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/counter-steps.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":322391,"url":"https:\/\/css-tricks.com\/animating-number-counters\/","url_meta":{"origin":1122,"position":1},"title":"Animating Number Counters","date":"October 9, 2020","format":false,"excerpt":"Number animation, as in, imagine a number changing from 1 to 2, then 2 to 3, then 3 to 4, etc. over a specified time. Like a counter, except controlled by the same kind of animation that we use for other design animation on the web. This could be useful\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/random-number-slots.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":188625,"url":"https:\/\/css-tricks.com\/fun-times-css-counters\/","url_meta":{"origin":1122,"position":2},"title":"Fun Times with CSS Counters","date":"November 18, 2014","format":false,"excerpt":"Some bonafide CSS trickery from Will Boyd, like counted selected items and continuing a count across multiple sections.","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":312104,"url":"https:\/\/css-tricks.com\/how-to-reverse-css-custom-counters\/","url_meta":{"origin":1122,"position":3},"title":"How to Reverse CSS Custom Counters","date":"June 11, 2020","format":false,"excerpt":"I needed a numbered list of blog posts to be listed with the last\/high first and going down from there. Like this: 5. Post Title 4. Post Title 3. Post Title 2. Post Title 1. Post Title But the above is just text. I wanted to do this with a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/css-counter-reversed.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":339298,"url":"https:\/\/css-tricks.com\/list-markers-and-string-styles\/","url_meta":{"origin":1122,"position":4},"title":"List Markers and String Styles","date":"April 29, 2021","format":false,"excerpt":"Lists\u2014we\u2019ve all worked with them in one form or another. I\u2019m talking about HTML\u2019s

    and
      . Much of the time, because we desire styling control, we turn off the list\u2019s markers completely with list-style-type: none, and start styling from there. Other times, we choose from a very limited set\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/custom-list-style.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":266050,"url":"https:\/\/css-tricks.com\/counting-css-counters-css-grid\/","url_meta":{"origin":1122,"position":5},"title":"Counting With CSS Counters and CSS Grid","date":"February 6, 2018","format":false,"excerpt":"In this post, we're going to demonstrate how we can use the source order independence of CSS Grid to solve a layout issue that's the result of a source order constraint. Specifically, we're going to look at checkboxes and CSS Counters\u2014two concepts that rely on source order when used together.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/counter-grid.jpg?fit=1048%2C434&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1122"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=1122"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1122\/revisions"}],"predecessor-version":[{"id":8456,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/1122\/revisions\/8456"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=1122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=1122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=1122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}