Hot answers tagged

67

The short version is that that the various tags and CSS have different purposes. <h1>Whatever</h1>, for example, carries a certain amount of meaning along with its use: "This is a header, an important–first-level one" and so on. Some parsers also use the hx tags(and others) to create an outline of the document's structure which can be used for ...


53

@toomanyairmiles is partially correct - the purpose of this technique is to allow parallel connections from the web-browser to the server. Web browsers should allow a minimum of two simultaneous connections to a single host, but many new browsers can manage up to 60. Regardless, concurrent simultaneous connections between browser and web-server(s) is a major ...


41

Markup and presentation are different This is a bit like asking "why should we have walls when we have paint?" :) HTML tags denote what your content is - this is a headline, this is a list, etc. CSS denotes what your content should look like - headlines should be blue, lists should be indented this much, the menu should be on the left, etc. Javsascript ...


23

You can do that with the CSS white-space rule: div { font-family: "Courier New", monospace; white-space: pre; } The fonts included in that rule make each character the same width which is common formatting for text in a <pre> tag. Keep in mind that this will make all of your <div> tags behave this way. Ideally you will assign those <div&...


23

Google have very recently updated their guidelines to officially state that you should not block access to CSS or JS files in robots.txt. This ensures that when Google crawls the site, it can render it exactly as a browser would. If you block CSS or JS files, it could harm how well your website performs in the rankings. More info here: Updating our ...


17

I actually found something now: http://leafo.net/lessphp/lessify/ It does a basic formating, e.g.: #header { /* ... */ } #header p { /* ... */ } to #header { /* ... */ p { /* ... */ } }


17

Yes. You can use an app that auto-compiles LESS files to CSS on your development machine as you code. Then simply upload the generated CSS file to your server when you're done developing. Crunch! for Windows & Mac WinLess for Windows CodeKit for Mac


17

http://unused-css.com/ Does some of what you ask, and they have this to say:- Latish Sehgal has written a windows application to find and remove unused CSS classes. I haven't tested it but from the description, you have to provide the path of your html files and one CSS file. The program will then list the unused CSS selectors. From the screenshot, it looks ...


17

As the text is part of the logo, I would keep it in the image (saves on trying to match any non-standard fonts and having to position it exactly like it is in the logo) - you can always put it in the alt attribute or use microdata to to enhance your seo: <div id="main-logo-holder" itemscope itemtype="http://schema.org/Organization"> <meta ...


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


15

Actually, you don't need any conversion tool to start working with LESS. LESS syntax is backwards compatible with CSS. It means any CSS file is also valid LESS file. Simply get your CSS and rename it to a LESS file. Then use LESS-specific features along with your changes. The more you'll update the file, the more you'll be able to use LESS features. I did ...


14

CSS files linked from HTML documents are added to the parallel download queue as the HTML is parsed; the key thing is that non-asynchronous JavaScript links block the HTML parser, preventing later tags from being added to the download queue until that JavaScript is downloaded, parsed and executed.[1] Here's an example that forces the browser to download ...


13

Please also think about people with some sort of impairment who (as an example) have to use a braille reader. In such cases the html tags are of far greater importance than the visual css stylings.


13

For Helvetica I would just specify the font-family with CSS like so: body{ font-family: Helvetica, Arial, sans-serif; } This says, "use Helvetica if it's available, Arial if it's not, and the system's default sans-serif font if neither are installed". Helvetica is installed on 100% of Mac and iOS devices [source]. The other two cover the rest, and Arial ...


13

In the past, Web browsers were only able to download two items at once (now 6 or more), so downloading resources from various domains is faster than a single domain. This applies to everything from images to javascripts. Many companies also use a CDN, a tool which ensures the end user gets their data from a server that is geographically close to them, ...


13

Sure. Obviously, it would be better to use CSS alone but if you can't, use what you have. Do as much as you can with CSS and use JS as needed. Not sure why you can't change the existing CSS but you can add a style sheet with JS. (function() { //create a new element var newStyle = document.createElement("link"); //set the required attribute for a ...


12

I don't know of a compressed version out there but you might want to create a saved Google search to keep yourself updated. You could submit it to http://www.cdnjs.com and it has a shot being hosted by them for free. Also, it looks like you could get an uncompressed version from here, http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css. Finally, ...


11

Uuuh .. I do not have any Apple device or browser to check .. but it looks like they reading EXIF metadata (in particular rotation). I have opened one of this images in XnView -- image is displayed 90 degrees rotated. Try removing all extra info from these images (do it for at least one image). Use image compressors, like this one: punypng.com (or any ...


11

I use SimpLESS - drag, drop, done.


11

Google says nothing about that. The more important things are page structure (correct tags, H1 for headers, sections, etc..), metatags and urls. The google prefers sites that loads fast, that have good structure and descriptive urls. You should focus on that. More info here: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=35291


11

Search engines index pages by URL, and duplicate content is content that's found at more than one URL - see this for more: What is Duplicate Content? Search engines would only penalize content appearing more than once on the same page if it appears to be spammy or an attempt at keyword stuffing. Incorporating different menus and layout structures would not ...


10

Possible reasons: They're using the lowest common denominator web browser. In other words, they're trying to render reasonably well in older browsers. Because these sites get huge amounts of traffic even a browser with .1% of the browser market can add up to a significant number of users. So in an attempt to support those users they shy away from more ...


10

Su answered the semantic portion. With regards to SEO, you'll find that the h1 element is given more weight by search engines than other tags. The h2/b/strong tags are given a little more weight than regular text. Most other tags are pretty much equal, but you should always use the most appropriate tag for the job. Google has recently begun parsing tables ...


10

LESS comes with a binary (lessc) that lets you precompile your .less files. You use it as such: $ lessc styles.less > styles.css But I think most people just use the lessc -w or lessc --watch command to recompile the CSS stylesheet automatically whenever the LESS file is updated. You can also have lessc minify the CSS, e.g. lessc -w -x. Edit: Just to ...


10

This is happening because Telex doesn't actually provide a bold weight, which means the browsers synthesize it, and that doesn't always come out so great. (Note as @toscho points out below, this is a general problem, not limited to Google Webfonts or even just font embedding.) WebKit/Safari seems to especially suck at this and in the mobile version you'll ...


10

Google penalizes for text that is not visible to the users. White text on a white background can be used for keyword stuffing. In that case the keywords are put in the page source where Googlebot indexes them, but the font color makes it so that users don't see it. Shadow text is not cloaking because the user can see it clearly. There is no risk of ...


9

Google has no problem with hidden text. They do have a problem with hidden text that is only available to search engines for the manipulation of their rankings. So unless your hidden text is only there for the search engines to see, you have nothing to worry about. And making your site mobile friendly by removing content is definitely common and acceptable....


9

The short answer is that email client developers don't have a strong business case to support web standards in their products. Their products are designed and sold as plain text or rich text person-to-person communication tools, not as mass-marketed HTML intrays. The original web standards movement The longer answer is that it took a huge effort from some ...


9

I always create a lib directory for third party components, you really don't want to be changing third party libraries unless it is strictly necessary. Go with the 3rd option.


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