DocomoCss <img src=“https://travis-ci.org/milk1000cc/docomo_css.svg?branch=master” alt=“Build Status” />

docomo_css is a CSS in-liner.

Most handsets for the Japanese cell-phone carrier DoCoMo cannot use external style sheets, such as

<link rel="stylesheet" /> style css, only can use in-line CSS.

Instead, every element must use its own style attribute, for example

<div style="font-size:x-small">

docomo_css works around this by inlining all CSS automatically for you.

Also, docomo does not support styling some elements such as h1, but does if you nest the contents in a span or div. This library automatically handles transforming of markup such as

<h1>foo</h1>

<h1><span style="font-size:x-small">foo</span></h1>

so you don’t need to change any styling. If you were doing this manually before and don’t want docomo_css to automatically update your html, use

docomo_css inject_unsupported_style: false

Install

sudo gem install docomo_css

Requirements

* Rails 4

Usage

# app/controllers/articles_controller.rb
class ArticlesController < ApplicationController
  docomo_filter  # please add this
  ...
end

# app/views/articles/index.html.erb
<html>
<head>
  <%= stylesheet_link_tag 'foo', media: 'handheld, tty' %>
</head>
<body>
  <div class="title">bar</div>
</body>
</html>

# public/stylesheets/foo.css
.title {
  color: red;
}

# result
<html>
<head></head>
<body>
  <div class="title" style="color:red">bar</div>
</body>
</html>

Options for the value of this docomo_css are

* mobile - always transform css when content type is application/xhtml+xml, default false
* xml_declare - add xml declaration, default true

Author

milk1000cc <[email protected]>

Paul McMahon <[email protected]>