External CSS in UIWebView

– 2010/03/24Posted in: iOS, Lab Work, Notes, Programming

i had to document this because every forum post i have seen is different. I even saw one guy post a style sheet to the cloud and then use that absolute url in his app. I was not about to go there, although an interesting solution. The bottom line is you must do the following if you want your css to live on the phone, but be accessible to your application

  • make a style sheet in your Resources dir
  • in your code (sample below) utilize the NSBundle class method to get the mainBundle – with that , you can have access to any file as long as you know the name and suffix
  • IMPORTANT: get the base url of this app. The UIWebView instance will want this
  • in your html markup string, DO NOT FORGET the rel tag on your link…in fact, don’t cheat this portion at all. In the sample below, i have all but a doctype, which is still a bad, but the point is html->head->link , and then close the tags for the body
  • load the html string to your web view, add that base url
-(void)showLocationOnPrep:(MKPlacemark *)placemark
{
	NSString *cssPath = [[NSBundle mainBundle] pathForResource:@"styles" ofType:@"css"];
 
	//do base url for css
	NSString *path = [[NSBundle mainBundle] bundlePath];
	NSURL *baseURL = [NSURL fileURLWithPath:path];
 
	NSString *html =[NSString stringWithFormat:@"<html><head><link rel="stylesheet"  href="%@" type="text/css" /></head><body><p>I am awesome html in sans-serif...here is a variable: %@ ...</p></body></html>",
					cssPath , varValue];
	NSLog(@"%@ : csspath",html);
	[detailWebView loadHTMLString:html baseURL:baseURL];
}