Saturday, April 5, 2008

One Tag Solution: Simple CSS Ratings

The 4- or 5-star rating has become the default for conveying popularity or relevance across the web. There are many ways to render a rating using stars in HTML and CSS. However, I have not seen a solution that is simultaneously simple, optimized, semantic, and accessible. Therefore, I set to work to uncover my own. The result looks like this: (The image 'none.gif' is a 1x1 transparent gif file)

<img class="rating" alt="3.5" src="/none.gif" />



The initial goal was to start by rendering a rating using only a single HTML tag that both visually displays the rating and retains its numerical value. The tag to use was very obviously the <img> tag. It is meant to display visual information and the 'alt' attribute is the perfect way to convey the numerical value of the rating. For slow-loading webpages, the numerical value of the rating will be displayed until the images load in.

The next objective was to make use of image spriting to contain the stars so that only one image has to be loaded and cached for all ratings. There are several different approaches to this. The image sprite I chose to make use of looks like this:



The idea is to set the width of the image to be 5-stars wide and then slide this sprite around to get the desired rating.

Building the CSS for this is rather simple. I will demonstrate the intended, but IE6-incompatible approach first. IE6 is the only modern browser that does not support the attribute selector syntax.

img.rating {
background: transparent url(stars.gif) no-repeat scroll;
width: 100px;
height: 20px;
}
img.rating[alt="0.0"] { background-position: -100px 0; }
img.rating[alt="0.5"] { background-position: -80px -20px; }
img.rating[alt="1.0"] { background-position: -80px 0; }
img.rating[alt="1.5"] { background-position: -60px -20px; }
img.rating[alt="2.0"] { background-position: -60px 0; }
img.rating[alt="2.5"] { background-position: -40px -20px; }
img.rating[alt="3.0"] { background-position: -40px 0; }
img.rating[alt="3.5"] { background-position: -20px -20px; }
img.rating[alt="4.0"] { background-position: -20px 0; }
img.rating[alt="4.5"] { background-position: 0 -20px; }
img.rating[alt="5.0"] { background-position: 0 0; }

The less than desirable CSS solution that works with IE6 is to simply add an additional class to the image indicating which rating is being displayed.

img.rating {
background: transparent url(stars.gif) no-repeat scroll;
width: 100px;
height: 20px;
}
img.rating-0\.0 { background-position: -100px 0; }
img.rating-0\.5 { background-position: -80px -20px; }
img.rating-1\.0 { background-position: -80px 0; }
img.rating-1\.5 { background-position: -60px -20px; }
img.rating-2\.0 { background-position: -60px 0; }
img.rating-2\.5 { background-position: -40px -20px; }
img.rating-3\.0 { background-position: -40px 0; }
img.rating-3\.5 { background-position: -20px -20px; }
img.rating-4\.0 { background-position: -20px 0; }
img.rating-4\.5 { background-position: 0 -20px; }
img.rating-5\.0 { background-position: 0 0; }

The modified HTML code would look like:

<img class="rating rating-3.5" alt="3.5" src="/none.gif" />

In the end, the result is a simple, semantic rating in one tag and one image. For part 2, I will demonstrate how to turn this into a rating you can pick from.

32 comments:

  1. Im working on a similar system, and looking for a way to use only CSS (at least for the hover portion). I am very curious about part two of your article.

    ReplyDelete
  2. If I only knew back then if it were this simple. Still, thanks for sharing this one-tag approach. My coding nightmare just got easier.
    web design perth

    ReplyDelete
  3. I am just new in web designing and I still got a lot to learn but I admire useful information such as this. Thank you very much.

    ReplyDelete

  4. تعد المدينة المنورة من ارقى مناطق المملكة و تتميز بالطابع الدافئ والتواصل بين سكانها واجتماعهم في المناسبات المختلفه من هنا جاءت اهمية شركة تنظيف كنب بالمدينة المنورة لتقديم خدمات التنظيف للبيوت والمنازل والفلل والقصور والشقق والمدارس
    ولاننا ندرك بان الفلل تحتاج الى عمالة مدربة على تنظيف الاماكن الواسعة ولديها القدر فالاول لمهارة عمالها تعد افضل شركة تنظيف فلل بالمدينة المنورة تتميز بسرعة اداء عمالها في تقديم خدمة نتميز باننا افضل شركات تنظيف الفلل بالمدينة المنورة
    وكثيرا ما تحتوى الفلل على عدة خزانات فلابد من الاستعانة بافضل افضل شركة تنظيف خزانات بالمدينة المنورة فهى تستخدم افضل منظفات الخزانات والمطهرات
    ولاننا افضل شركة غسيل شقق بالمدينة المنورة نقدم افضل خدمة تنظيف شقق بالمدينة المنورة بالاعتماد على افضل منظفات الكنب والستائر بالبخار
    افضل شركة تنظيف شقق بالمدينة المنورة -شركة تنظيف منازل بالاحساء
    ____________________________________
    افضل شركة مكافحة حشرات بالمدينة المنورة تقوم بمكافحة كافة انواع الحشرات والآفات
    وكثيرا ما يحتاج سكان المدينة المنورة الى شركة نقل اثاث لنقل الاثاث من المدينة المنورة الى اى مكان داخل او خارج المملكة من هنا جاءت اهمية افضل شركة نقل عفش بالمدينة المنورة تستخدم افضل سيارات نقل العفش المخصصة
    شركة تنظيف خزانات بالقطيف
    شركة عزل مسابح بالمدينة المنورة
    شركة نقل عفش بينبع -
    ______________________________________
    شركة رش مبيدات بالمدينة المنورة
    تعتبر تسربات المياه من احد المشكلات التى لابد ان نقوم بحلها على الفور لان تسربات المياه تؤدى الى عدد كبير من المشكلات نحن فى غنى عنها فالاول شركة كشف تسربات بالمدينة المنورة تعتمد على افضل الاجهزه والالات المخصصه باعمال الكشف عن تسربات المياه فلا داعى للقلق من شان التسربات على الاطلاق فتذكر عزيزى العميل ان افضل شركة كشف تسربات المياه بالمدينة المنورةعلى اتم استعداد للوصول الى اى مكان بالمدينة

    ReplyDelete
  5. شركة تخزين اثاث بالرياض

    الاول مستودعات تخزين اثاث بالرياض
    توفر افضل المستودعات لتخزين الاثاث والعفش التى تتوفر بها كل عوامل الامن للحفاظ على الاثاث وتقوم بتغليف الاثاث قبل تخزينه للمحافظة عليها فالاول افضل شركات تخزين العفش بالرياض ونوفر سيارات لنقل الاثاث من اى مكان داخل المملكة .
    شركات نقل العفش بينبع -
    شركة نقل عفش في جدة
    بالاضافة الى خدمة نقل اثاث بالرياض فنحن نمتلك اكبر اسطول نقل بالرياض يوفر لك افضل خدمة نقل اثاث بالرياض
    بالاضافة الى ان اسعارها في متناول الجميع فهى فالاول افضل شركة نقل عفش بالرياض رخصية بالمقارنة مع باقي الشركات بالرغم من جودة عملها ودقة المواعيد فهى تقوم بتغليف العفش للحفاظ عليه اثناء النقل وتقوم باستخدام سيارات مغطاه مخصصة لنقل العفش للحفاظ عليه من اضرار الشمس والامطار والاتربة فالاول افضل شركات نقل اثاث بالرياض وتغطى كافة مدن المملكة
    شراء اثاث مستعمل شمال الرياض
    شركة ترميم المنازل بالرياض
    شركة تنظيف بينبع
    افضل شركة نقل اثاث بالمدينة المنورة
    وان كنت بحاجة الى شركة شراء اثاثك القديم المستعمل فباتصالك بنا تحصل على افضل شركات شراء اثاث مستعمل بالرياض والخرج
    افضل شركة تركيب مكيفات بالرياض
    تخزين اثاث بالرياض - افضل شركة نقل عفش بجدة
    شركة ترميم منازل بالرياض

    ReplyDelete
  6. for beginners like me need a lot of reading and searching for information on various blogs. and articles that you share a very nice and inspires me .
    cara menggugurkan kandungan
    obat aborsi
    kalkulator kehamilan

    ReplyDelete
  7. من المعروف ان نظافة المنازل من بين اهم الخدمات الضرورية في التنظيف والترقية بمنازلنا الى مصاف المنازل العصرية والتي عرفت تنظيفا عصريا من شانه ان يوفر لساكنته ظروفا حياتية راقية ولابد من توفر هيئة تختص في المجال مع تقديم ضمانات متكاملة من شانه ان تجعل الافراد يضمنون نجاح خدمة التنظيف ولا حاجة للمزيد من ضياع الاموال عبر طلبات خدمة نظافة المنازل التي لا تلبي حاجياتهم ولا تتماشى مع رغباتهم لأن العديد من شركات تنظيف المنازل تسعى فقط الى عرض خدماتها عبر طرق ترويجية فحسب من اجل كسب المال فقط دون مراعاة الوازع الاخلاقي والضمير المهني الذي يحتم على مدراء مثل هاته الشركات ان يسعوا خلف ارضاء العملاء ليس اكثر من هذا عبر اتقان تنظيف المنازل . شركة تنظيف خزانات بالقصيم
    شركة مكافحة حشرات بالدمام
    شركة تنظيف بابها
    شركة تسليك مجارى بتبوك
    شركة تنظيف منازل بتبوك
    شركة تنظيف بالطائف
    شركة نقل عفش بالخرج

    ReplyDelete
  8. هل تبحث عن افضل شركة تقدم خدمات مزلة فى الاحساء نحن فى شركة ركن كلين نقدم لك افضل الخدمات التى لا ماثيل لها نقوم بتنظيف ومكافحة الحشرات وتسليك المجارى كما اننا نقضى على الحشرات تمام وبدون اى اضرار اتصل بنا وسوف نصلك اينما كنت
    شركة تنظيف منازل بالاحساء
    شركة تنظيف فلل بالاحساء
    شركة تنظيف شقق بالاحساء
    شركة تنظيف مجالس بالاحساء
    شركة تنظيف خزانات بالاحساء
    شركة تنظيف بيارات بالاحساء
    شركة تسليك مجارى بالاحساء
    شركة رش مبيدات بالاحساء
    شركة مكافحة حشرات بالاحساء
    شركة مكافحة النمل الابيض بالاحساء

    ReplyDelete
  9. dự án chung cư vinhomes nguyễn trãi là một quần thể đô thị hiện đại chung cu vinhomes nguyen trai được trang bị nội thất tinh tế thiết kế vinhomes nguyễn trãi sang trọng vinhomes nguyen trai đẳng cấp kết hợp cùng tiện nghi vinhome nguyen trai cao cấp vinhome nguyễn trãi là điểm đến lý tưởng vincom nguyen trai đầy đủ cho người tiêu dùng vincom nguyễn trãi có bán giày nam các loại giày da nam đẹp nhất, giày lười nam đẹp.Công ty thiết kế nội thất hàng đầu tại hà nội, chuyên thiet ke noi that

    ReplyDelete
  10. من المعروف ان نظافة المنازل من بين اهم الخدمات الضرورية في التنظيف والترقية بمنازلنا الى مصاف المنازل العصرية والتي عرفت تنظيفا عصريا من شانه ان يوفر لساكنته ظروفا حياتية راقية ولابد من توفر هيئة تختص في المجال مع تقديم ضمانات متكاملة من شانه ان تجعل الافراد يضمنون نجاح خدمة التنظيف ولا حاجة للمزيد من ضياع الاموال عبر طلبات خدمة نظافة المنازل التي لا تلبي حاجياتهم ولا تتماشى مع رغباتهم لأن العديد من شركات تنظيف المنازل تسعى فقط الى عرض خدماتها عبر طرق ترويجية فحسب من اجل كسب المال فقط دون مراعاة الوازع الاخلاقي والضمير المهني الذي يحتم على مدراء مثل هاته الشركات ان يسعوا خلف ارضاء العملاء ليس اكثر من هذا عبر اتقان تنظيف المنازل . شركة شفط بيارت بالرياض
    شركة عزل خزانات بالقصيم
    شركة تنظيف بتبوك
    شركة نقل عفش بالاحساء
    شركة تسليك مجارى بالاحساء
    شركة تنظيف خزانات بتبوك
    شركة تنظيف خزانات بالاحساء
    شركة تنظيف خزانات بابها

    ReplyDelete
  11. من المعروف ان نظافة المنازل من بين اهم الخدمات الضرورية في التنظيف بمنازلنا الى مصاف المنازل العصرية والتي عرفت تنظيفا عصريا من شانه ان يوفر لساكنته ظروفا حياتية راقية ولابد من توفر هيئة تختص في المجال مع تقديم ضمانات متكاملة من شانه ان تجعل الافراد يضمنون نجاح خدمة التنظيف ولا حاجة للمزيد من ضياع الاموال عبر طلبات خدمة نظافة المنازل التي لا تلبي حاجياتهم ولا تتماشى مع رغباتهم لأن العديد من شركات تنظيف المنازل تسعى فقط الى عرض خدماتها عبر طرق ترويجية فحسب . شركة نقل عفش بالقصيم
    شركة مكافحة حشرات بالقصيم
    شركة تنظيف بالقصيم
    شركة تنظيف منازل بالقصيم
    شركة رش مبيد بالقصيم
    شركة تنظيف خزانات بالطائف
    شركة تنظيف بالخرج

    ReplyDelete
  12. تعلن صيانة جليم جاز انها تعمل علي في مراكز الصيانة لصيانة الاجهزة الكهربائية عملت علي وضع ارقام تيلفون خاصة بتللك المراكز لتواصل العملاء معهم وحل مشاكلهم جميعها .
    https://www.almyaa.com/Glemjaz-Maintenance/

    ReplyDelete
  13. تعلن صيانة بوش العالمية انها تعمل علي تصليح الاجهزة الكهربائية في تللك المراكز علي يد اكبر فريق خبراء فنيين متخصصين في صيانة الاجهزة الكهربائية .
    http://egy.help/maintenance/%D8%A8%D9%88%D8%B4/

    ReplyDelete
  14. شركة الحارس الخاص في مصر سوف توجد بها جميع انواع كاميرات المراقبة المتميزه مع شركة حرسات امنية سوف تجد كافة الخدمات المتميزه والمتطورة في جمهورية مصر العربية من خلال شركة امن و حراسة علي اعلي جودة .
    http://www.guards-security.com/

    ReplyDelete
  15. تعلن شركة العنود انها اكبر شركة تنظيف خزانات بمكة المكرمة والمملكة العربية السعودية اي انها تعمل علي تنظيف خزانات بمكة عن طريق وسائل العزل الحديثة و المستخدمة في عزل خزانات بمكة المكرمة .
    http://www.el3nod.com/1/company-tanks-isolation-cleaning-mecca

    ReplyDelete
  16. تعمل مراكز صيانة تكنوجاز بتقديم جميع الخدمات المتاحة للاجهزة الكهربائية وايضا تعمل مراكز صيانة باناسونيك عن طريق تلبية كافة طلباتكم فور اتصال الاعملاء و تركيب قطع الغيار اللازمة للاجهزة الكهربائية .

    ReplyDelete
  17. تتميز دار مسنين بالقاهرة بأنها تقدم افضل خدمات الرعاية الصحية و النفسية و الترفيهية لكبار السن على يد خبراء ، كما في دار مسنين مما يجعل من السهل على العملاء الوصول الى فروعنا في اي وقت .
    http://www.careolder.com/

    ReplyDelete

  18. شركة كشف تسربات المياه

    شركة البيت السعيد
    طرق شركة البيت السعيد شركة كشف تسربات المياه في عزل تسربات المياه:
    إذا تسربات المياه قد تكون في الأسطح المشربة بمياه الأمطار أو مياه الخزانات إذا كانت الخزانات تسرب المياه ، وفي هذا الحالة فإن شركة البيت السعيد شركة كشف تسربات المياه تقوم بـ عزل الأسطح بمادة الفوم وهي من المواد المفضلة لدى الجميع، حيث إن الفوم خفيف الوزن، ويتميز بالعزل الحراري والمائي معًا.
    شركة كشف تسربات المياه بالرياض

    البيت السعيد
    للاستفسار عن جميع خدمات البيت السعيد عزل مائي و عزل حراري و عزل اسطح و عزل خزانات و عزل فوم وجميع انواع العوازل و رش مبيد و مكافحة حشرات و تسليك مجاري و كشف تسربات المياه
    و فحص فلل
    و صيانة مباني و ترميم منازل و نقل عفش و اثاث بالرياض يرجي الاتصال على 0543578920
    او زورو موقعنا على الانترنت

    http://www.elbaytelsaeed.com/2017/07/05/%d8%b4%d8%b1%d9%83%d8%a9-%d8%b9%d8%b2%d9%84-%d8%ad%d8%b1%d8%a7%d8%b1%d9%8a-%d8%a8%d8%a7%d9%84%d8%b1%d9%8a%d8%a7%d8%b6-%d8%a7%d9%84%d8%a8%d9%8a%d8%aa-%d8%a7%d9%84%d8%b3%d8%b9%d9%8a%d8%af-0543578920/ 

    ReplyDelete