In CSS how to setup links to be open in new window

Discussion in 'CSS' started by donald, Apr 4, 2008.

  1. #1
    here's the code I got (see below)
    I need to add something like

    a:link {
    target: _blank }


    <style type="text/css">
    
    .labelfield{ /*CSS for label field in general*/
    color:brown;
    font-size: 90%;
    
    }
    
    .datefield{ /*CSS for date field in general*/
    color:gray;
    font-size: 90%;
    
    }
    
    #example1 li{ /*CSS specific to demo 1*/
    margin-bottom: 4px;
    
    }
    
    #example2 div{ /*CSS specific to demo 2*/
    margin-bottom: 5px;
    }
    
    #example2 div a{ /*CSS specific to demo 2*/
    text-decoration: none;
    }
    
    #example3 a{ /*CSS specific to demo 3*/
    color: #D80101;
    text-decoration: none;
    font-weight: bold;
    }
    
    #example3 p{ /*CSS specific to demo 3*/
    margin-bottom: 2px;
    }
    
    code{ /*CSS for insructions*/
    color: red;
    }
    
    </style>
    Code (markup):

     
    donald, Apr 4, 2008 IP
  2. EricBruggema

    EricBruggema Well-Known Member

    Messages:
    1,740
    Likes Received:
    28
    Best Answers:
    13
    Trophy Points:
    175
    #2
    imposible.. for as far as i know!
     
    EricBruggema, Apr 4, 2008 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    target is a html attribute (and one that shouldn't be used unless you are working with framesets) - CSS is appearance, not behavior.
     
    deathshadow, Apr 4, 2008 IP
  4. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #4
    So use Javascript.
     
    blueparukia, Apr 5, 2008 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Oh yeah, using several K of javascript to work around an element that was deprecated for a reason is always good advice - RIGHT ;)

    Sorry, that was too good to pass up.

    target="_blank" and it's workaround equivalents are a total miserable /FAIL/ for accessability, and it pisses me off every time I come to a website that uses is because it dictates to me how the page is opened. If I want it in a new window I will CHOOSE to open it in a new window/tab. Don't FORCE the user to have no choice - that's arrogant, stupid and short sighted.
     
    deathshadow, Apr 5, 2008 IP
  6. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #6
    Yep. .
     
    drhowarddrfine, Apr 5, 2008 IP
  7. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #7
    I meant to open the link in a new window, no need for the target attribute, but to open a link in a new window you need javascript or one of Microsofts gay alternatives to Javascript.

    I agree with that.
     
    blueparukia, Apr 5, 2008 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    If only I could force browser caching... the testers seem to accidentally click my links (help text) in my forms and then go back to a blank form, fill it in again. I'm currently being told to Javascript new windows but that doesn't help those without JS. People blame the site, not the browser when sh*t doesn't work.

    That said, it's a behaviour, and shouldn't be in CSS... then again, I've abused CSS to make "behaviours" anyway... : )
     
    Stomme poes, Apr 6, 2008 IP
  9. beagrie

    beagrie Peon

    Messages:
    32
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #9
    There are is a stupidly large number of people that:

    - don't know you can use tab to move from element to element
    - don't know you can change the text size in your browser
    - don't know what a browser is

    I think it's safe to assume a lot of people don't know HOW to open in a new window. I know it's poor from an accessibility point of view but I lean towards opening in a new window but making sure the user knows this is going to happen first.
     
    beagrie, Apr 6, 2008 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #10
    That just means javascript that doesn't degrade properly - The technique I prefer in those cases is to have the help text load after the form with navigation anchors on them - you make the help anchor do href="#helpUserName", then have your javascript do a class-swap on a wrapper around the form hiding all the help, putting onclick="showHelp('helpUserName'); return false;"

    That way, with script off the help is present and able to be scrolled to (and the back button should return the user to thier place in the form - though I'd make a return to form link as well) while with script present you get the fancy scripted behavior.

    That's the trick to ANY javascripting method - it should 'degrade gracefully' when script ain't there.
     
    deathshadow, Apr 7, 2008 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Nope, ds, you misunderstand-- I'm (probably inappropriately) using <a> to hold help text which shows on :hover and :focus-- no problem there as the <a> has an id and href to that id, so an accidental click is okay. But some actually go to another page-- and there is no target="blank", so the people go to a wholly new page. Which is fine if you have browser caching, you read the page (a whole page, doesn't fit in a CSS tooltip), click the Back button, finish the form.

    But people are clumsy, or old, or sick, or not good with a mouse, or whatever, accidentally click these links as they're going through the form, get to the new page, hit the Back button... and the form is blank cause they ain't gots no caching. (Our tester doesn't have it on, and I've been told that I may not rely on it being there, and haven't even checked Lynx to see if it's standard there... cause if it was just people turning it off, I'd say, tough, that's what you get)

    So while I know of a Javascript which can emulate target="blank" and degrades gracefully, fully working link without JS etc, it does not help those without JS. PLus, I don't like the idea of JS fux0ring with people's browsers if I can get around it.

    But, the only way to get around it, it seems, is to have these particular pages degraded back to Transistional (shudder) and ensure everyone and his brother gets a new window whether they want it or not. Because then browser caching is not an issue. They never left the page, the page was never reloaded, the info stays. I can warn all I want that these three links will open in a new window unless overridden in the browser (I don't worry about those folks, they can override target with right-click, Open In New Tab), but just like I can't stop people from clicking when they didn't want to, I can't force them to cache.

    Form help texts (CSS, not JS) are, I'm being told, one of the few places where a new window makes more sense than just a normal new page link.

    I would never hide my help text behind JS. Right now, it looks a little strange, but a text browser can read all the help text, the labels, great, it's just the only reliable way I can get it working is using <a>. Otherwise I guess I'd have the help text stuffed inside the label... and extra JS to help our very special friend with :hover. : (

    
    <div>
      <label for="Rijbewijs">[b]<a id="rb" href="waarschuwing.html">[/b]<span>Hebt u nog een bromfietscertificaat? De regels zijn veranderd! Klik hier. </span>Rijbewijs (A, B, of AM): </a></label>
        <input type="text" id="Rijbewijs" name="Rijbewijs" value="">
    </div>
    
    Code (markup):
    Too many people didn't know they needed a driver's license now, cause they didn't used to need one, so we have a page explaining who how what the rules have changed. The whole label is wrapped in the a so people have been clicking on the label by accident.
     
    Stomme poes, Apr 8, 2008 IP