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

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 '...


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 ...


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


8

You can't hide ads; it's in the AdSense terms and conditions under "5. Prohibited Uses": You shall not, and shall not authorize or encourage any third party to: ... (ii) edit, modify, filter, truncate or change the order of the information contained in any Ad, Link, Ad Unit, Search Result, or Referral Button, or remove, obscure or minimize any Ad, ...


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

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 ...


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 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.


5

Joni Korpi, creator of the 'Less' framework, just released his 'Golden Grid System', an adaptive framework that's notable for its elastic gutters and zoomable baseline grid. Beyond that, though, you've mentioned the popular ones; if they don't meet your needs, you'd be wise to consider building your own framework. Two books I recommend that will help: ...


5

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

Highly-technical users don't necessarily use the latest versions of popular browsers, although they probably do on their main machine. They often use customized or beta versions of browsers, bleeding-edge not-yet-trendy browsers, really-fast or in-their-workflow browsers (lynx/links2, emacs, etc.) and sometimes really old or unusual browsers (whatever's ...


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

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 ...


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

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 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 the terms of service refer to a situation where you load the ads but then do not display them to the visitors, hence mucking up view/click through stats. If you don't load the ad in the first place then it should be be OK. You'd have to do this with JavaScript rather than CSS though - detect the window width, only run the AdSense code if it's wider ...


3

SlidesJS is less than 7kb minified and works pretty well. It does simple slide and supports links. Not sure about the CSS3/Animate requirement.


3

A quick Google search turns up this: Respond.js: Fast CSS3 Media Queries for Internet Explorer 6-8 and more and css3-mediaqueries-js.


3

Twitter Bootstrap is a great framework to build off of http://twitter.github.com/bootstrap/ one thing to keep in mind is what you plan to build. If wordpress can handle the bulk of the functions your looking for in an app then you'll need to be looking at WP templates. If you're building an app from scratch something backend then twitter bootstrap and some ...


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 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

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 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; ...


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