1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Inline CSS is useful ?

Discussion in 'CSS' started by Nilesh Designer, Sep 11, 2014.

  1. #1
    hi...m nilesh..
    i want ask that...if m using inline css while disigning the website, so is there any problem for website loading or validation or any other problem if i use inline css???
     
    Nilesh Designer, Sep 11, 2014 IP
  2. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #2
    Inline CSS loads a little slower (as Google developer tools point out) and if you wanted to make site wide changes to your website you would have to update every single page.
     
    HuggyStudios, Sep 12, 2014 IP
  3. Nilesh Designer

    Nilesh Designer Greenhorn

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    no...only in few files i use inline css... so is there any problem with that?
     
    Nilesh Designer, Sep 12, 2014 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #4
    Nope, technically it's not cached but if it's only a few tweaks on individual pages then there's no problem.

    If you find yourself having to repeat the tweak over and over then it's more practical to have it as a proper css class.

    Loading time is purely down to the size of the files. It shouldn't make an discernable difference.
     
    sarahk, Sep 12, 2014 IP
  5. darkvisje

    darkvisje Well-Known Member

    Messages:
    231
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    120
    #5
    It will not be noticed by your visitors if that is what you wanna know :).. I use also inline CSS and I dont notice any changes with a separate stylesheet
     
    darkvisje, Sep 12, 2014 IP
  6. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #6
    If I look at the source of a website and see inline styles I just think the developer is either lazy or inexperienced. There isn't really any reason to use inline styles.
     
    HuggyStudios, Sep 12, 2014 IP
  7. Nilesh Designer

    Nilesh Designer Greenhorn

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #7
    thnks to all...
     
    Nilesh Designer, Sep 12, 2014 IP
  8. Nilesh Designer

    Nilesh Designer Greenhorn

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #8
    hello...
    m designing the website..bt ther r some problem which m facing..
    when m using the css tags or htmls tags...n for ouput m checking in all browser whether the that css style applid or not... evry time i checked in differnt browser(ie, mozila,chrome)
    for example- i used background:rgba(0,0,0,0.5);
    this is ok in chrom n mozila bt when i checked in IE ,its not working....

    same for the font source- i used prototype font..i put font in separate folder "fonts" and in css i write code like this--->

    @font-face{
    src:url('fonts/Prototype.TTF') format('truetype');
    font-family:'prototype';
    }
    this font is working in chrome but not working in mozila n IE.. :(

    so is ther any solution on above two examples ? and how i avoid to check in every browser ?- how i chek tht tag should competible to all browser??? plz help mi
     
    Nilesh Designer, Sep 12, 2014 IP
  9. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #9
    Google is of course your best friend. A little searching and you will find the right answers to your problems.

    RGBA is not supported in all browsers: http://css-tricks.com/rgba-browser-support/ your website should "gracefully degrade" as feature support is different for older browsers.

    You need different font formats for different browsers. Personally I use Font Squirrel http://www.fontsquirrel.com/tools/webfont-generator have a read and look at that website.
     
    HuggyStudios, Sep 12, 2014 IP
  10. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #10
    Let me put is this way using inline CSS is stupid, lazy and a sign of incompetence. There is absolutely no justification for it. It makes maintenance more difficult. increases load time, increase parsing time to build the Document Object and has the potential to screw up natural cascades, because it has the highest level of specificity. Anyone who would advocate leaving CSS inline in a production page is an idiot.

    Cd&
     
    COBOLdinosaur, Sep 12, 2014 IP
  11. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #11
    surely using rgb or rgba is just lazy? If you have time to work out the rgb values you have time to get the hex for the colour and reduce the processing.

    Agree with @HuggyStudios over the font thing. Buggy implementation in IE, take suggested code where possible - nothing is as simple as it should be.

    There's a world of difference between advocating for something and acknowledging that it happens and one or two style definitions in code isn't the end of the world.

    A well constructed theme should have all the bases covered however there will always be times the end user wants something different. I have a client who has a professionally designed site and the page editor is set up to use the styles in the css but I've had to give them access to font and size because there's always someone who wants to do something horrific to their text. I'm there to build the site and keep it running, not to give a masterclass in design aesthetics to everyone who uses the site. And I'm not going to preempt every bad design decision by creating a class in the css.
     
    sarahk, Sep 12, 2014 IP
  12. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #12
    You would use RGBA to achieve transparency with the last value being the transparent amount. Hex codes doesn't support that.

    My suggestion would be to either set RGB as the backup value for browsers that don't support RGBA:
    
    .class{
      background-color: rgb(0, 0, 0); /* is set if rgba isn't set */
      background-color: rgba(0, 0, 0, 0.8); /* overwrites rgb if browser supports it */
    }
    
    Code (markup):
     
    HuggyStudios, Sep 13, 2014 IP
  13. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #13
    When I see some getting defensive about not following "best practices", it just suggest that they know it is wrong but they prefer not to fix anything unless they have too because something failed.
     
    COBOLdinosaur, Sep 13, 2014 IP
  14. NLZ13

    NLZ13 Well-Known Member

    Messages:
    166
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    113
    #14
    In my opinion, inline CSS should only be used for HTML E-mail markup. Otherwise keep all your CSS separated from your HTML, organized and easily changeable.

    The larger your projects will be, the more benefit you will experience when you have to make changes
     
    NLZ13, Sep 13, 2014 IP
    COBOLdinosaur likes this.
  15. Robin Mohammad

    Robin Mohammad Greenhorn

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #15
    inline css is not a good solution but is very useful sometimes.
     
    Robin Mohammad, Sep 16, 2014 IP
  16. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #16
    I generally frown upon the practice for several reasons.

    The first is it makes one of the big advantages of CSS -- having different appearance for different media targets -- harder to do. Remember, the STYLE attribute can't have attributes, so you can't say media="screen,projection,tv" or media="print" on it.

    Second, it's not cached, or pre-cached. Even if something is only used on one or two pages, if you load the CSS for all pages up front, those sub-pages don't have to download it later -- and really if you have enough CSS (anything more than 48k) for the ENTIRE SITE where pre-loading the sub-page CSS has a significant impact on the first-load, you've probably done something terrifyingly wrong. (like using idiotic haflwit bull like bootcrap, blueprint, YUI, etc)

    Next, I just find it easier to have my style in one file in one window, and my markup in another, that way I can work side-by-side.

    Finally, it's putting what things look like in the markup -- and that's something you shouldn't be doing in the first place. We've been using the term "semantic markup" for about a decade on this, but I'm starting to sour on that and am taking to calling it what it is, USING HTML PROPERLY. HTML is for saying what things ARE, NOT what they look like. If you are choosing your tags OR attribute OR classes OR Id's based on somethings appearance, you're just flat out doing it all wrong. That's why class="red" or using a fieldset just because you want a border around something -- or using tables just because you want columns is wrong.

    IMHO the STYLE tag should be removed from HTML entirely, it only encourages sloppy crappy coding practices. As an attribute it should be deprecated to show a warning, but still allowed for the handful of cases where style can be used to convey meaning -- like width or height on a bar chart.

    THIS markup:
    <div class="percentBar"><span><span style="width:50%"></span></span> 50%</div>
    Code (markup):
    which would have style like this in the external stylesheet:
    
    .percentBar span { display:inline-block; border:2px solid #00F; }
    .percentBar span span { border:0; background:#55F; }
    
    Code (markup):
    Is a valid usage scenario in my mind for the STYLE attribute.

    THIS:
    <div style="font-weight:bold; font-size:200%; color:#FED;">Some Text</div>
    Code (markup):
    Is NOT. You might as well go back to writing HTML 3.2 with idiocies like the FONT and CENTER tags at that point.
     
    deathshadow, Sep 17, 2014 IP
  17. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #17
    That has been suggested informally among some W3C editors, but there is resistance from tool developers, and plugin builders who are afraid of losing the ability to hack in jquery during initial load.
     
    COBOLdinosaur, Sep 17, 2014 IP
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #18
    Which IMHO are scam artists jacktards and inept asshats who have no business developing for websites in the first place. **** jQuery and the morons dumb enough to think it offers anything of value.

    Of course, what style that's loaded BEFORE scripting has to do WITH scripting is beyond me, but that's just your average scripttard ineptitude of doing things with JS that is CSS' job, and wasting massive amounts of scripting on what more often than not is the job of a simple class swap.
     
    deathshadow, Sep 17, 2014 IP
  19. M_line

    M_line Banned

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #19
    Some email clients strip out <head> and <style> tags from emails, so it's best to have your CSS written inline within your markup. We know that writing inline CSS is time consuming and repetitive, so we've built this conversion tool to automatically inline your email's CSS.
    Just paste your email's HTML below, click Convert, and you'll get a more email-friendly version that's ready to send. If your email's CSS includes media queries for responsive styling, don't worry - the inliner tool will leave those rule sets alone.
     
    M_line, Sep 17, 2014 IP