attribute selectors

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Brian
    #1

    attribute selectors

    Hello,

    The thread on a List Apart made me go visit their site. Wow. If
    there's a contest for the www's smallest font, they're in the running.
    I thought it would be a good use of user css. And that led to a
    question about attribute selectors.

    I looked under the hood, and found the following body tag:

    <body onload="window. defaultStatus=' A List Apart, for people who make
    websites.'" id="sectiontwo" >

    So, in my userContent.css the following:

    body[onload="window. defaultStatus=' A List Apart, for people who make
    websites.'"] {
    font-size: 100% !important ;
    }

    Restarted Mozilla, nothing. I have successfully used my user css for
    other overrides, but this attribute selector thing has me stumped. Are
    there any resources on using them outside of the css 2 spec?

    --
    Brian
    follow the directions in my address to email me

    Tags: None
    • Jukka K. Korpela
      #2
      Re: attribute selectors

      Brian <usenet2@juliet remblay.com.inv alid-remove-this-part> wrote:
      [color=blue]
      > I looked under the hood, and found the following body tag:
      >
      > <body onload="window. defaultStatus=' A List Apart, for people who
      > make websites.'" id="sectiontwo" >
      >
      > So, in my userContent.css the following:
      >
      > body[onload="window. defaultStatus=' A List Apart, for people who
      > make websites.'"] {
      > font-size: 100% !important ;
      > }
      >
      > Restarted Mozilla, nothing. I have successfully used my user css
      > for other overrides, but this attribute selector thing has me
      > stumped.[/color]

      Have you tested with a simpler case, like onload="foo()"? Maybe value
      of the attribute causes problems, since the selector tests for _exact_
      match (including the use of whitespace). And have you tested whether it
      is specifically font-size setting that fails? After all,
      font-size: 100% can mean different things, especially if some style
      sheet sets font-size for the enclosing element (<html>, in this case).

      On the pragmatic side, in this case you have the id attribute to play
      with. This means that you can use the #sectiontwo selector, which works
      on all CSS enabled browsers. But maybe they use id="sectiontwo " on that
      particular page only, not site-wide - its name suggests that.

      --
      Yucca, http://www.cs.tut.fi/~jkorpela/

        Comment

        • David H?s?ther
          #3
          Re: attribute selectors

          > body[onload="window. defaultStatus=' A List Apart, for people who make[color=blue]
          > websites.'"] {
          > font-size: 100% !important ;
          > }[/color]

          Maybe it has something to do with the specifity. Try something like

          body[onload="window. defaultStatus=' A List Apart, for people who make
          websites.'"] * {
          font-size: 100% !important ;
          }

          although this should be sufficient

          body[onload*="A List Apart"] * {
          font-size: 100% !important ;
          }

          --
          David Håsäther

            Comment

            • Steve Pugh
              #4
              Re: attribute selectors

              Brian <usenet2@juliet remblay.com.inv alid-remove-this-part> wrote:
              [color=blue]
              >The thread on a List Apart made me go visit their site. Wow. If
              >there's a contest for the www's smallest font, they're in the running.[/color]

              Too true. The minimum font size setting in my browser (Opera, but also
              present in Mozilla) takes care of it though.
              [color=blue]
              > I thought it would be a good use of user css. And that led to a
              >question about attribute selectors.
              >
              >I looked under the hood, and found the following body tag:
              >
              ><body onload="window. defaultStatus=' A List Apart, for people who make
              >websites.'" id="sectiontwo" >
              >
              >So, in my userContent.css the following:
              >
              >body[onload="window. defaultStatus=' A List Apart, for people who make
              >websites.'"] {
              > font-size: 100% !important ;
              >}
              >
              >Restarted Mozilla, nothing. I have successfully used my user css for
              >other overrides, but this attribute selector thing has me stumped. Are
              >there any resources on using them outside of the css 2 spec?[/color]

              Hmm. I used the id="sectiontwo" , etc. when I wrote some user styles to
              take care of the narrow columns on ALA (once the small font size had
              been scrapped via my browser settings the lines were two short so I
              made the whole layout fluid rather than fixed width, see
              http://steve.pugh.net/taming.html for details of what I did).

              Back on topic, for another side I added body[onLoad=""] as a selector
              to my user stylesheet and that works in Opera 7. Yes, the site really
              does have empty onLoad attributes on many of its pages!

              Otherwise, apart from echoing what Jukka says have you considered
              using a substring match for the selector?
              body[onload*="A List Apart"]
              This may avoid problems with exact mathing of the longer string and
              also makes the stylesheet shorter and easier to comprehend when
              editing.

              cheers,
              Steve

              --
              "My theories appal you, my heresies outrage you,
              I never answer letters and you don't like my tie." - The Doctor

              Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

                Comment

                • Lauri Raittila
                  #5
                  Re: attribute selectors

                  In article Brian wrote:[color=blue]
                  > Hello,
                  >
                  > The thread on a List Apart made me go visit their site. Wow. If
                  > there's a contest for the www's smallest font, they're in the running.
                  > I thought it would be a good use of user css. And that led to a
                  > question about attribute selectors.[/color]

                  I have long ago fixed font size issues in general user stylesheet, as you
                  propably want same size text for all pages, it makes sence to say
                  p {font-size:xxy !important;}
                  [color=blue]
                  > I looked under the hood, and found the following body tag:
                  >
                  > <body onload="window. defaultStatus=' A List Apart, for people who make
                  > websites.'" id="sectiontwo" >
                  >
                  > So, in my userContent.css the following:
                  >
                  > body[onload="window. defaultStatus=' A List Apart, for people who make
                  > websites.'"] {
                  > font-size: 100% !important ;
                  > }
                  >
                  > Restarted Mozilla, nothing. I have successfully used my user css for
                  > other overrides, but this attribute selector thing has me stumped. Are
                  > there any resources on using them outside of the css 2 spec?[/color]

                  You could try what browser says if you say
                  body:before {content:attr(o nload)}




                  --
                  Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
                  Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
                  tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

                    Comment

                    • Brian
                      #6
                      Re: attribute selectors

                      solution found, fyi

                      Brian wrote:[color=blue]
                      >
                      > The thread on a List Apart made me go visit their site. Wow. If
                      > there's a contest for the www's smallest font, they're in the running.
                      > I thought it would be a good use of user css.[/color]

                      What didn't work:

                      body[onload="window. defaultStatus=' A List Apart, for people who make
                      websites.'"] p {
                      font-size: 100% !important ;
                      border: thin solid yellow;
                      }

                      body[onload="window. defaultStatus=' A List Apart, for people who make
                      websites.'"] div#menu li#one {
                      font-size: 200% !important ;
                      border: thin solid yellow;
                      }


                      I thought the latter one would offer enough weight, but no.

                      What did work:

                      body[onload="window. defaultStatus=' A List Apart, for people who make
                      websites.'"] * {
                      font-size: 100% !important ;
                      border: thin solid red;


                      --
                      Brian
                      follow the directions in my address to email me

                        Comment

                        • Brian
                          #7
                          Re: attribute selectors

                          David H?s?ther wrote:[color=blue]
                          >
                          > this should be sufficient
                          >
                          > body[onload*="A List Apart"] * {
                          > font-size: 100% !important ;
                          > }[/color]

                          Did not work. (tested by including a blue border)
                          May I ask where the attribute* selector is in the spec? I didn't find
                          it under selectors.

                          --
                          Brian
                          follow the directions in my address to email me

                            Comment

                            • Brian
                              #8
                              Re: attribute selectors

                              Brian wrote:[color=blue]
                              > David H?s?ther wrote:
                              >[color=green]
                              >>this should be sufficient
                              >>
                              >>body[onload*="A List Apart"] * {
                              >> font-size: 100% !important ;
                              >>}[/color]
                              >
                              > Did not work. (tested by including a blue border)[/color]

                              Sorry, it did work. My testing has not been done very carefully.
                              [color=blue]
                              > May I ask where the attribute* selector is in the spec? I didn't find
                              > it under selectors.[/color]

                              Still wondering about this.

                              --
                              Brian
                              follow the directions in my address to email me

                                Comment

                                • Anne van Kesteren
                                  #9
                                  Re: attribute selectors

                                  Brian wrote:
                                  [color=blue]
                                  > Still wondering about this.[/color]

                                  <http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#attribute-substrings>

                                  Mozilla supports some parts of CSS3.


                                  --
                                  Anne van Kesteren
                                  <http://www.annevankest eren.nl/>

                                    Comment

                                    Previous template Next
                                    Working...