Tag Info

New answers tagged

2

Yes and no. Yes: smaller files of course == faster download. But no: Unless your CSS is just completely out of control, it is likely smaller than the average image on your site. Plus, it will be cached after the first page load. If you're looking for a speed uptick, there are better ways to spend your time optimizing your site. In no particular order ...


0

As one who has/had a rather large CSS file, I know that any style sheet can be reduced significantly. I am in the middle of reducing my style down to a minimum. But then again, my site is not too complicated really. It is often argued that CSS, even for an advanced site, does not have to be big. I assume the same can be done with JavaScript. (But please do ...


4

I would say try using media queries first. One method I found easier when dealing with a design that was originally only for desktop was this: Start with two separate stylesheets. One for the new responsive design, and the other for the old desktop version: <link rel="stylesheet" media="screen and (max-width: 959px)" href="css/mobile.css"> <link ...


3

I worked on a site that used that method, and I had problems with screen rotation on mobile devices. Since JavaScript will only detect once on page load, if the user rotates the device it won't expand to the full width the way it will with media queries. It was easier for me at the time just to switch to CSS, but perhaps a JS expert would know if there's a ...


3

Responsiveness and "appear correctly on smart phones" are completely different tasks. Presumably, responsiveness refers to eliminating--where possible--extra round trips to the server. Error checking, Ajax to retrieve requested data, and dynamic DOM manipulation are the tasks that typically improve responsiveness. The use of JavaScript (or JavaScript ...


1

We used to used the popular 960.gs css framework for our sites. We wanted to make it responsive. Someone had made a JS based responsive plugin for the 960 gs so we thought hay why not just use that as we would not have to make any changes to the structural site templates. It worked but was laggy in most browsers including the good ones. You would ...


12

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


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


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


1

The "general" rule of thumb which I see and understand it to be... The main, global style is a external stylesheet that is linked to the whole site. While the individual "page fixes" such as small margin, paddings, and minor issues are within a tag to fix them. When it comes to doing this in web design and web development, I was taught this way by my ...


2

Lets analyse briefly each of your reasons. CSS rules are completely loaded with the original page, no additional requests. Kind of true, they are on the rendering engine waiting for the start of the HTML rendering engine/process, which may take longer because the styles are inline so the HTML takes longer to arrive. Depending on size of the page, it ...


1

You are forgetting one critical issue. CSS files can be cached. This means that there would be a significant drop in bandwidth usage using an external CSS file vs in the header. However, I do understand automation since that is the world where I live. Still, I do not insert style into the header ever except for tools that I create. It may be that static ...



Top 50 recent answers are included