Hot answers tagged

23

This is the standard way of loading with @font-face, hacky fixes and all!! @font-face { font-family: 'BebasNeueRegular'; src: url('BebasNeue-webfont.eot'); src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('BebasNeue-webfont.woff') format('woff'), url('BebasNeue-webfont.ttf') format('truetype'), ...


16

I think it really depends on what you find easiest for development and what helps you keep a tidy stylesheet. The only real downside I can think of in splitting would be that should an element's attribute appear in all your stylesheets, you would have to update 5 separate files to change it (rather than it appearing side-by-side in one place). According ...


14

90% or more of Americans have images on, JavaScript enabled, CSS support, and a reasonable connection. Spending 90% of your time chasing the 10% of the world that has gone out of their way to not experience the modern web is a waste of time.


12

Assume: JavaScript will be turned off CSS3 will not be supported Images will be disabled The users connection will be slow I know that's not what you want to hear but as web designers and developers this is the reality we face. Not only will there be users using older browsers but some of them will alter the settings on their browser to change its default ...


12

Add Google Analytics to your site and track your users The only way to find out is to collect a reasonable sample of statistics about your user base. Anything short of that is just a baseless assumption. Fortunately, Google Analytics tracks absolutely everything about the browser, screen size, enabled capabilities, etc... Target Internet Explorer as the '...


9

It will not use the browser default font. But rather it will use the default sans-serif font. Since the last font in the font stack is not a specific font. It is a generic name. Some browsers allow you to set it or it will default to the OS of the users computer. Reference URL: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family


7

With CSS you can manage two classes and attached them to your HTML element like the following: .my-font { font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; } .otherClass { background-color: white; } <div class="my-font otherClass">An HTML element</div> Otherwise, you can take a look to a solution like SASS. The used ...


6

The Campaign Monitor people maintain a big table of CSS support in various mail clients. There's a changelog at bottom with running notes, and a bunch of CSS3 properties(mostly decorative) were initially added April 2010.


6

I think it's very good idea. There is a nice js library called modernizr which can add the support of html5 new tags and detect which css3 features the browser supports.


6

The functionality of :visited pseudoclass has been restricted in many modern browsers (Fx4, IE9, Chrome) to prevent CSS exploit. You can read about it here, but the crux is: For many years the CSS :visited selector has been a vector for querying a user’s history. It’s not particularly dangerous by itself, but when it’s combined with getComputedStyle() in ...


5

Make sure that at the very least your home page works fine on every environment you can reasonably support. If specific pages require technologies not widely supported, state it clearly in the links that lead to them (don't need to use anything obnoxious, title and alt texts on links and images might suffice) and in the pages themselves (for instance, adding ...


4

I think the point John Conde was making was that just because they are technical people you cannot assume they are using a modern browser. Having said that, I tend to agree with Evik James that the OP needs to find the balance between coding the site for a wider audience or getting down to blogging instead. If he wants to monetize this site at some point, ...


4

@import in-and-of itself is slow. You shouldn't be using unless absolutely necessary and in this case I don't think it is. Just create a second <link> element to the style sheet with the font rules or include them in styles.css. Unused font that needs to be downloaded will not be downloaded so declaring them but never using them will not hurt ...


4

It slightly depends on what you want to achieve: are you trying to make your page load faster or are you trying to make developing easier? If you target on the latter, than you could use multiple sheets, but thats all a matter of preference. I find it the easiest to use one big file since this gives you an overview of all the styles you've declared. If you ...


4

Its probably best to have only one CSS file, but to minify and gzip it. Assuming your 30KB are before doing that, you will probably get the file size down to about 5KB with minification (white space removal) and gzipping. Splitting up will probably get you some more speedup, but only under some conditions. You'd have to make sure that only one stylesheet ...


4

why is using multiple consecutive line breaks in HTML considered a bad practice Because it breaks the fundamental principle of separation of concerns: by mixing the "content" and "presentation" layers. By using multiple <br>s to create "margins" you are embedding the presentation in the content. To change the "margins" you need to change the content. ...


4

It will resort to the default font of the browser. In this case with the sans-serif specification it would look for the default sans-serif font. I think for Windows this font is Arial, and for Mac it's Helvetica (don't quote me on that, it's been a long time since I've looked). If no sans-serif font exists on the machine, the browser will switch over to its ...


3

You could also define your font with @font-face: @font-face { font-family: MainFont; src: local('Lucida Sans Unicode'), local('Lucida Grande'); } @font-face { font-family: HeadlineFont; src: local('Arial'), local('Helvetica'); } @font-face { font-family: SerifFont; src: local('Georgia'), local('Times'), local('Times New Roman'); } ...


3

You could add a class to your style sheet for each font family, such as: .fontA {font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;} .fontB {font-family: arial, helvetica, sans-serif;} .fontC {Georgia, Times, "Times New Roman", serif;} Then use it like this, with the other rules: <div class="otherRule1 fontA "> </div> <p class=...


3

Your find that neither Chrome or Firefox is rendering Ambient via the @Font-Face and what is happening is that the Crusive Font is rendering slightly different in Firefox than Chrome (Very Little Difference, but its using Crusive not Ambient, Fix posted below) Chrome, and Firefox render fonts differently from one another so sometimes you notice no change, ...


3

You should read about progressive enhancement to support the most part of the users and take advantage of browser's features. Responsive design is another important topic to support the most part of devices (Nowadays a lot of people use mobile devices). On the other hand, out there are a lot of libraries like Modernizr, boilerplate, explorercanvas to help ...


3

I think you should assume they are using modern browsers based on your target market. Keep a tab on browser usage and if significant numbers of people are using older browsers, then make compatibility changes.


3

You should split your CSS files based on media queries because CSS files are render blocking. When the browser is constructing your DOM, it has to first wait and load all your CSS files. You will reduce your page load time if some of your CSS files are only loaded based on certain media queries. This also goes for adding async to a JavaScript script tag; ...


3

It's always good to go for % because it guarantees fluid content. It's good both for Google and your users to have a good mobile version of your site. I don't think there would be a difference in the performance or at least not a difference that you can spot. You can test it by putting both of the properties and testing your page speed with a tool for both ...


3

There is a performance difference between the two, using background-size: 100%; is not supported for Android 4.3 Browser and below. Also, background-size percentage values are not properly supported for SVG images on Safari. Also, iOS Safari has long had very buggy behaviour with background-size: cover. All this info is from the excellent Can I Use... ...


3

When we use before it means, this css will apply (virtually) before the default content in html element, and vice-versa for after but the catch is these are called pseudo selectors, which does not change the real DOM, i.e. the change would be visible but not real. Refer this to learn more about it : https://css-tricks.com/almanac/selectors/a/after-and-...


2

Here is a legal explanation. Basically, other than the concept of "Trade Dress" CSS can not be copyrighted. Literary copy-write laws do not apply to CSS or JavaScript. I looked at a lot of discussions about this, and this link contained the most researched, reasonable sounding, and thought out I could find.


2

Some other useful links, when deciding what CSS3 features you might want to use: http://caniuse.com/ (gives a good breakdown of what elements and selectors are usable across which platforms) http://css3please.com/ (an in-page-editable playground to mess with CSS3 features, this also gives some advice about which techniques and features are supported by ...


2

Yes I would design with HTML5 and CSS3 to save time you can use some scripts such as video players which start with HTML5 and have safe fall backs for any browser which doesn't support . I'd also start with a framework such as Twitter bootstrap which is very compliant, you'll save a lot of time messing with CSS.


2

It is a good idea to use these new technologies, because it's where we're headed. So many other sites already have content that requires a modern browser. Take Youtube for example. Even Gmail. But the list goes on. Most people have a modern browser already, and it would be to YOUR full advantage to design a site with HTML5 and CSS3. While support for some ...


Only top voted, non community-wiki answers of a minimum length are eligible