Search

A new extension, "User Agent Feature Detection" is now available for download. Comments and feedback can be left here but if you discover any issues, please post it on the issue tracker.

Description

The User Agent Feature Detection extension makes information about user agent features available in the param pool for the purposes of responsive web design.

How it works

On page load the extension checks for the presence of a cookie called feature_detection. If none is found (as on the first page request) the value of data/params/feature-detection is set to 0. In the XSL template if the value of data/params/feature-detection is 0 a script block is written to the head of the page which creates a cookie called feature_detection with a value of 1 to prevent the script block being inserted in subsequent pages during this session.

For each feature test that has been enabled on System » Preferences, a unique param node is created. In the XSL template if a test’s param node is present a corresponding JavaScript block is written to the page containing a test that creates a cookie for that feature. On subsequent page loads the extension checks for the presence of those cookies and adds the values to the param pool. After all test have been run the page is immediately reloaded.

Installation

  1. Upload the useragentfeaturedetection folder in this archive to your Symphony extensions folder
  2. Enable it by selecting “User Agent Feature Detection” on the System » Extensions page, choose “Enable/Install” from the “With Selected…” menu, then click “Apply”
  3. On System » Preferences enable the tests you want to use and verify that feature-detection and any other test params are being included in your page XML
  4. Add user-agent-feature-detection.xsl to Blueprints » Components » Utilities

Usage

  1. Import the feature detection utility it to your stylesheet: <xsl:import href="../utilities/user-agent-feature-detection.xsl" />
  2. Call the feature detection utility early in the <head> of your HTML: <xsl:call-template name="user-agent-feature-detection" />
  3. Use the information contained in /data/params/feature-… to customize your layout or content. For example, you can use the value of /data/params/feature-screen-max in your JIT image source attribute to create responsive images: <img src="{$root}/image/4/{data/params/feature-screen-max}/0/1/path/to/image.jpg" />

Notes

With this release the screen dimensions (integer, in pixels) and orientation (landscape, portrait, or square) of the device is returned. Future versions may add additional feature detection.

Changelog

  • 0.3, 1 December 2011
    • Changed feature-maxwidth to feature-screen-max
    • Added feature-screen-min
    • Added feature-screen-orientation
  • 0.2, 29 November 2011
    • Add preference for default maxwidth
    • Move feature detection JavaScript to utility
    • Add ability to enable or disable individual tests
  • 0.1, 28 November 2011
    • Initial release

Credits

@briandrum - Very nice! I can see this being very handy. Thank you so much!

Very nice indeed! I have been looking into RESS a bit an instantly thought of a Symphony extension combined with JIT. Thanks so much for setting this up, I'll be sure to play with it soonish.

Thanks guys. This is my first extension, so any and all feedback will be greatly appreciated.

Cool! Did you consider adding the info to the param pool? Might save the hassle of adding the Data Source to every page. Just thinking out lowd...

Stuff like this I find more useful if it's added to the param pool. Could do both?

Great work on your first extension though!

User Agent Feature Detection updated to version 0.1 on 27th of November 2011

@Lewis & @Henry, thanks for pointing out the obvious. I'm a little embarrassed I didn't think of the param pool before creating a separate data source and I agree that it's a better place for this information.

I have overhauled and renamed the extension, and added a preference field for the default maximum width for user agents without JavaScript or those with JavaScript that do not accept cookies.

Might save the hassle of adding the Data Source to every page

Check out QuickDS for adding a DS to many Pages. It has a QuickEvent twin as well. I can't live w/o them.

User Agent Feature Detection updated to version 0.2 on 28th of November 2011

With this release I have:

  • Moved the feature detection JavaScript to a utility
  • Added the ability to enable or disable individual feature tests
  • Added a preference for the default maxwidth for user agents without JavaScript, or with JavaScript but with cookies disabled

Thanks Brian. Do you have plans to update this extension to detect more features? I liked your previous (less generic) name "RESS" better since it described exactly (for those in the know about RESS) what it does.

User Agent Feature Detection seems very generic (not search friendly) and does 'what it says on the tin' only for screen width (at the moment).

That aside: thanks a lot for picking this up and for advocating Responsive Web Design :)

Do you have plans to update this extension to detect more features?

I do. I was thinking of adding Modernizr’s touch tests next. Do you have any suggestions for other tests that will be useful?

Not sure if you've installed the new extension yet, but I added the ability to enable/disable individual tests via the Preferences page. That way I can add lots more tests while giving the site owner the option to only use the ones he needs, similar to the way Modernizr can be configured.

I liked your previous (less generic) name "RESS" better

Thanks for the feedback. I was trying to make the extension's purpose more clear but I guess I missed that goal, for you at least. My thinking was that RESS is not yet a commonly recognized acronym, while UA Feature Detection was easily understood by most anyone.

I'm not married to either name, though. I'd be interested to hear what others think on the subject.

User Agent Feature Detection updated to version 0.3 on 1st of December 2011

Now that I've started using this extension in conjunction with JIT Image Manipulation, I realize that an image will be cached for each unique device resolution that makes a request, which could reduce the likelihood that a cached version exists for any given request and add up significantly to an undesirable use of server disk space.

So I'm considering adding a user-configurable array of "Breakpoints". The next-largest breakpoint to the requesting device resolution would be returned as a param for use with JIT. So given Breakpoints of 600, 800, 1000 and 1600, an original iPhone (480 × 320) would receive the 600px image, an iPhone 4s (960 × 640) would receive 1000px, and an iPad (1024 × 768) would receive the 1600px. That way a controlled number of cached images are created while ensuring that the returned image is appropriately sized for the requesting device.

Sound good? See any issues with this approach?

User Agent Feature Detection updated to version 0.4 on 18th of December 2011

User Agent Feature Detection updated to version 1.0 on 2nd of February 2012

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details