I'm looking for a solution to dynamically swap out markup. I'm familiar with solutions that conditionally load and swap stylesheets, scripts, images, or blocks of HTML markup such as responsive.js, interchange.js in Foundation 5, yepnope ... tons others I'm sure.
I have a website that has a ton of content that needs to be completely replaced with a mobile version of the markup. I can definitely not load styles and scripts below the browser width in mind, but I'm looking for a good way to swap out most markup out of the DOM once it gets below that width as well. If the changes weren't so significantly different between the two versions I could just do some hacky workaround but I definitely don't want all these resources loading on a phone and don't want to just redirect to a mobile URL if browser width is below width.
Anyone know of a good way to do this?
Related
As in topic title, I'm working on some project but my CSS works great in Mozilla but in Opera dimensions in px are different.I was trying to fix that using percent dimensions but other issues appears.It's some kind of Opera problem as it recognise CSS code in other way because when inspecting an element, it returns totally different px dimensions of div's and borders for example.My idea to avoid it is to create separate CSS files for specific browsers and choose correct one after checking user agent?Maybe exists shorter way to solve this problem?I need my website displayed correctly in Mozilla,Opera,Chrome.
While possible, loading a different CSS based on detected browser is not generally considered best practice and defeats the purpose of CSS. Before you take that decision:
consider writing cross-browser compatible CSS:
use em or rem instead of px as a font-size unit;
add browser specific prefixes to properties that require it for added compatibility;
use Can I Use when in doubt - it's a great tool;
check out browser specific selectors
As a personal note, I have tried this method myself and quickly fell behind updating all required CSS files. I ended up merging them in a single file about one year later and that change alone was harder than expected.
I coded a small website written in php, with a fixed 869px width to display properly in every screen. I also would like to integrate it to other pages with different width, which is sometimes wider then the original size.
I tried some solutions, but none of them seems to working cross-browser or does not scale the content within the wrapper. I am also trying with the viewport property but I had no success.
I am looking for some cross-browser jquery script that uses the zoom effect of the browser to fit the content to the browsing area. I have a div in the body called wrapper, and I would like to scale it and the content in it, like I do it with the CTRL + keys in the browser.
You can use Bootstrap to scale your content (http://twitter.github.com/bootstrap/). If you want to adjust the font size as well you can build with LESS or use plain javascript (e.g. using JQuery).
You can wrap your page into a
<div class="container-fluid">
</div>
that scales automatically on various standard resolutions. You can adjust the width by overriding the bootstrap.min.css. A guide on how to enable responsive features can be found here: http://twitter.github.com/bootstrap/scaffolding.html#responsive
You can add row-fluid class divs and use span classes to align your content. More information on how to use the grid system: http://twitter.github.com/bootstrap/scaffolding.html#gridSystem
For LESS I can recommend their homepage: http://lesscss.org/
And this is an older StackOverflow post that illustrates how to insert variables from JavaScript: variable manipulation in Less
Maybe using LESS is already enough for your needs.
I run and actively develop a forum (which in itself runs on heavily modified SMF 1.1.16) - one feature I would like to add is the ability for the user to pick custom colours (say 2-4) from a widget in the corner of the page to customize the colours of the forum.
The HTML output of the forum is structured such that modifying the colours can be done with pure CSS, and I'm wondering what the right way to insert this CSS is.
The idea I had was that once the user saves their colour information, a piece of javascript would generate the necessary CSS and save it using HTML5 localStorage (probably using a polyfill library). Then, on $(document).ready(), we check for this CSS being present and if it is, we inject it into the page head.
Is this approach sensible? It's easy to develop, but will it result in a flicker of the usual styling (given that pages are rather heavyweight) before custom styling is applied?
If so, is there a better way to do this completely client-side? I would rather not involve the server if at all possible, but if I must I can just have the server generate CSS files for every user who saves custom styling.
What's the best approach?
I suggest you have a base style for the page first so that there won't be FOUC. Then, have your JS load the custom styles, parse it, and apply it to the page afterwards. You could do a "fade-in change" (like fade in the background etc) so the styles won't load like a snap.
You could also blank the page first, like set the body to display:none, before you load the styles, then after the styles are applied, remove the display:none
You also have to note that local storage has it's size limit. Don't load too much. Consider looking for the LZW compression in JS. It might help.
My requirement is to lookup all the CSS content (external, internal and inline) from a given URL for some specific CSS content. I am currently using the 'PHP Simple HTML DOM Parser' to lookup HTML. But is there a specific way I can achieve this for CSS, specifically, all types of CSS ?
Thanks in advance :)
It is possible to gather all CSS a HTML document includes (style attributes and elements) and links (link element, type CSS).
However, as far as I know, some CSS parser in PHP exists so far (but no interface to CSSOM). So you would be able to gather all CSS, but you would need to write/integrate a parser for CSS on your own.
Keep in mind that some sites use things like less which is then turned into CSS via javascript, so you might want to integrate less into PHP as well. Same applies for other, client-side CSS technologies.
I've recently bumped into facelift, an alternative to sIFR and I was wondering if those who have experience with both sIFR and FLIR could shed some light on their experience with FLIR.
For those of you who've not yet read about how FLIR does it, FLIR works by taking the text from targeted elements using JavaScript to then make calls to a PHP app that uses PHP's GD to render and return transparent PNG images that get placed as background for the said element, where the overflow is then set to hidden and padding is applied equal to the elements dimensions to effectively push the text out of view.
This is what I've figured so far:
The good
No flash (+for mobiles)
FLIR won't break the layout
Images range from some 1KB (say one h3 sentence) to 8KB (very very large headline)
Good documentation
Easy to implement
Customizable selectors
Support for jQuery/prototype/scriptaculous/mooTools
FLIR has implemented cache
Browsers cache the images themselves!
The bad
Text can't be selected
Requests are processed from all sources (you need to restrict FLIR yourself to process requests from your domain only)
My main concerns are about how well does it scale, that is, how expensive is it to work with the GD library on a shared host, does anyone have experience with it?; second, what love do search engines garner for sIFR or FLIR implementations knowing that a) text isn't explicitly hidden b) renders only on a JavaScript engine.
Over the long term, sIFR should cache better because rendering is done on the client side, from one single Flash movie. Flash text acts more like browser text than an image, and it's easy to style the text within Flash (different colors, font weights, links, etc). You may also prefer the quality of text rendered in Flash, versus that rendered by the server side image library. Another advantage is that you don't need any server side code.
Google has stated that sIFR is OK, since it's replacing HTML text by the same text, but rendered differently. I'd say the same holds true for FLIR.
I know that with sIFR, and I assume with FLIR that you perform your markup in the same way as usual, but with an extra class tag or similar, so it can find the text to replace. Search engines will still read the markup as regular text so that shouldn't be an issue.
Performance-wise: if you're just using this for headings (and they're not headings which will change each page load), then the caching of the images in browsers, and also presumably on the server's disk should remove any worries about performance. Just make sure you set up your HTTP headers correctly!
since FLIR is IMAGES and sIFR is flash i would imagine that it would be a bit more resource intensive to use sIFR. I havent run any tests but it seems logical.
Search engines search sIFR better than FLIR because some search engines can go into the text of a flash document
I don't know much about sIFR because FLIR worked, and it "felt" better to me than Flash. Just looking at the sIFR 3 beta demo page I noticed that it doesn't seem to react to browser preference text resizing. That is, I increase my font-size in Firefox (ctrl-+) and reload the page, the headings stay the same size.
To those who know sIFR, is this an actual limitation of the script or did they just do the demo page wrong?
If it actually doesn't handle this, I'd call that a major advantage for FLIR, which does work this way. People with impaired vision who don't use screen readers probably don't appreciate that the text doesn't resize to their preference.
That said, from a quick glance at sIFR's API, you should be able to make resized text work in sIFR. I'd consider it a bug to be fixed, not an essential disadvantage of the method.
Woff files is the best solution.
http://www.fontsquirrel.com/tools/webfont-generator