Archive for the ‘CSS’ Category

Apr 05

Have you ever gone along coding your front end, adding multiple classes to a single element, and then stop to consolidate because you feared you added a class too many? I know that I have at least paused to reconsider. <div class="related bug show nojs"> just seems to be reaching the limits of what my browser could handle.

Well, fear no more. Using JavaScript, Kilian Valkhof has uncovered a relieving (and surprising) conclusion. I don’t want to steal his thunder, but there is nothing to worry about; add all the classes you want.

Apr 04

Posh CSS

CSS, Slivers Comments Off

Posh CSS is like kottke but for CSS articles. I love it. Feedreader it.

Mar 26

The next CSS Off contest is April 5. At one minute past midnight (12:01 am), you will have 24 hours to send your entry in.

The winning entrant not only gets to feel really cool, but either receive a cash reward or a doubled cash donation to a charity.

It’s fun. CSS up.

Mar 06

If a design calls for a graphical horizontal rule, often front end developers will stick in an img tag and call it a day. However, an hr tag would be more semantic - and, most rich text editors for content management systems have a button for the horizontal rule.

These styles allow cross-browser image replacement for horizontal rule. In my implementation, the IE rules needed to be embedded, but it may have simply been a style overriding elsewhere in the stylesheet. Try it in a conditional commented stylesheet first.

The modern method uses background-image to replace the hr, which is defined normally by border. IE works some wonky stuff with list-item and you may have to scoot things around to get it to work just so, but it works!

CSS:
  1. /* ------- EMBEDDED ------- */
  2. <!--[if IE]>
  3. <style type="text/css">
  4. #primary-content  hr {
  5.     display : list-item;
  6.     list-style : url(/assets/images/wide-rule.gif) inside;
  7.     filter : alpha(opacity=0);
  8.     margin-left: -10px;
  9.     width : 0;
  10.   }
  11. #secondary-content hr{
  12.     display : list-item;
  13.     list-style : url(/assets/images/med-rule.gif) inside;
  14.     filter : alpha(opacity=0);
  15.     margin-left: 0px;
  16.     width : 0;
  17. }
  18. </style>
  19. <![endif]-->

CSS:
  1. /* ----- STYLESHEET ----- */
  2.  
  3. hr{
  4.       background:url(short-rule.gif) repeat-x top left;
  5.       border: 0;
  6. }
  7. #secondary-content hr{
  8.       background:url(med-rule.gif) no-repeat top center;
  9.       border: 0;
  10. }

Sep 13

June was fun, July was fabulous, August we took a nap, and it begins again September 15 at midnight CDT. There's a countdown on the site in case you don't know how that translates to your locality.

Yours truly is now part of seven judges hand selected for our love of all things good and pure. Learn a little more about the judges and then block off a chunk of the fifteenth for some hardcore CSS merriment.

Sep 13

Notes from An Event Apart Chicago:

  • Do not hesitate to use a table if the data is tabular
  • img: Treat the same as any other element
    • Set background-color for treatment, as even images have a background
    • Create a hover effect by creating a transparent image and use background-color for hover treatment
  • Tables
  • CSS has no inherent notion of what the html elements are “supposed” to do. Override any behavior and “usurp” it (case in point, table turning into a bar graph)
  • Impossible to completely divorce content from presentation. Apply style to an improperly structured or unstructured content is impossible - applying style to a txt file won’t work.
  • The table/bar graph example:
    • CSS requires “hooks” (the HTML elements, ids, and classes) to work on.
    • Can do 100% width minus 20px: left: 100%; top: 50%; margin: -2.5em 0 0 5em;
    • The top 50 and negative margin-top is vertical centering
    • Q1,2,3,4 (in the bar graph) using q2:left:25%, q3:left:50%, q4:left:75%, you are creating each q1/q2/etc td defined as a discrete “width”.
    • Lots of pre-computation with the brown/green CSS height. Eric’s vision is to embed CSS and embed the height post-computation on the server-side. Alternatively (a second, not ideal, option) use JavaScript to accomplish the same feat.
    • Uses percentages to maintain scalability. Note: percentages can have decimals, as can rgb color values.
    • Places tick marks in an external div, highly nonsemantic (ack!) but in our own markup, we’re encouraged to use semantic HTML. Some basic CSS to position properly.
    • Swap “Height” to “Width”, “left” to “top”, etc. and you create a horizontal graph with the same dance & pony show.
    • WHY?
      • "It is the most accessible form of this data as possible."
      • Make good use of th - the “scope” attribute associates the th as a column, and a td as a scope=”row”.
      • The point is, the data is tabular, and you’re not limited in your design. You may properly mark it up, display it to make designers happy, and have the accessibility to please our blind users.
  • Eric avoids use of “outset” and “inset” borders – he utilizes discrete top, left, right, bottom borders. Browsers (at this time) are far too inconsistent in rendering outset, inset.
  • A separate note, this demo table is something we might usually create as an image, but obviously that is not an accessible solution (without the longest, most obtuse alt attribute in the world). Rather than extensive production work, we should analyze the cost/benefit of creating an XSLT to manage user data into accessible bar graphs.
  • Reset stylesheets – deep in the browser application files, there are html/forms/etc css files – you can discern the browser defaults! Finally, the location! For example, Firefox2 on Mac: /communications/firefox 2.app/contents/macOS/res/html.css
  • Use Eric’s as a guide, but make your own, and through this we have an idea of what elements are included: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
  • With CSS: make your head, etc. displayed to the browser. Not useful in average instances, but useful for css test suites, and further proof of concept that any HTML tag can be styled with CSS - even the head tag.
Aug 08

Note: I have updated this post several times since the original publish.

At long last, the July winner is announced. Congrats.

The notes from the judges regarding my entry (I am #12) really did not extend much beyond my own observations.

Tony wrote that my .bug class is superfluous. I wholeheartedly disagree, for if the design were to change to add currently nonexistent divs that are not bugs, it will potentially complicate the code. Those elements will require classes. Then, where do you draw the line? Which divs require a class, and which do not, or should both have classes? I find it applicable to use the .bug class here, and were I to code it again, I would design the markup (for this section) in an identical manner. Plus, it makes more sense semantically when browsing the code.

JD noted that some stylistic elements were off. I know, I know, and I noticed them after I sent it in. I wrote about it in my aforelinked observations. He did not like the placement of the dots. That is a situation where, in coding the layout, I would call the designer to my desk and ask for his or her feedback. It is part of the challenge of this competition: trying to read the mind of the designer. In this practice, I inch toward the betterment of my own design skills. The variances between my mind and JD's were the downfall of this entry, but with his feedback I have a better understanding where I might improve next time.

I will refrain from comment on Ott's winning entry. It renders poorly in my Safari browser (along with the greater number of the entries), so I don't want to pursue the discussion any further, other than to elucidate the obvious problematic elements in Safari:

  • The rust border around the search boxes are not flushed. It looks silly, and this is exactly why I refrained from implementing it.
  • The dots are a few pixels off from the grey borders, in a highly noticeable manner.
  • I would think that CSS Off wrote this entry on spacing with the winning entry in mind. What! Then why did it win? So weird. How does this one win when the judges explicitly write a post highlighting a flaw that the entry bears in full?

Ott's is a nice fluid layout, other than the Safari flaws. There's no hate, Ott, just my browser that never gets any dev love.

I'll still participate in the next contest, for my own CSS practice and article inspiration. In any vein, this contest is good because it gives me a rounded perspective of my front end dev skills, although I cannot refrain from expressing one more time my confusion over the explicit flaws of the winning entries of this competition and the previous. Okay, scratch that - they are not explicit flaws, but just... averages. The winning entries were average, not extraordinary or particulary noteworthy or clean, but just overwhelmingly normal and average. They are entries that I would see get the bronze medal - good, but better around who swoop in for the gold.

I absolutely adore the detailed notes on each entry. From skimming, I noted a few things I will give a second look (see: elastic rounded corner yellow box). I encourage all to peruse the notes.

The following remark by the CSS Off guys struck a particular chord with me:

As web programmers, our job is to translate a design to the web. That means taking into account different monitor dimensions and resolutions. And then designing the site to look good in them. A site loses trust points immediately when the design doesn’t look “finished.”

It is the mindset we ought to have, as sometimes we focus too much on the back end of a site to remember that key fact of good-looking sites reigning. The original point of the statement was to utilize the space of the screen, but I apply it in that we must to have a hand in the design nearly as much as the designer, and must keep a keener eye on our results.

And I got a good chuckle over the judges' references to my namesake (neat!). Thanks for the linklove, judges! Keep up the good work.