Raindrops 1.497 更新概要
今回の変更について、
body要素に、新しいクラス rd-basefont-[13-20] を追加しました。
このクラスは、カスタマイズ/外観/フォント ベースフォントサイズでのフォントサイズに連携するクラスです。
投稿の編集画面にある「この投稿のカスタムCSS」に、カスタマイザーの追加CSSに4.9で追加されたエディターと同じCodemirror editorを追加しました。
CSSの変更
テーマ内で、カーニングの設定を有効にしました。日本語環境では、テーマのデフォルトフォントを「文字詰め」に対応した游ゴシックをベースにしていますが、クロームブラウザや、オペラブラウザでは文字がかすれて表示される問題がありましたので、今回の変更で、クローム、オペラの場合は、Noto Sans JPをデフォルトに変更しました。
この変更により、IE10以上、エッジを含めたモダンブラウザで、字詰めされた美しい日本語文章を表示できるようになりました。
ただ、Noto Sans JPは、WEBフォントで、環境によっては、ロードの時間がかかり、画面がチラつく様な事もあるかもしれません。そのような場合には、カスタマイズ/追加CSSなどに、以下のようなスタイルを追加していただくと、従来通りの表示が出来ると思いますので、気になる場合には、修正を検討してみてください。
.ja #bd{
font-family:Meiryo, sans-serif;
}
フォームバリデーションスタイルを追加しました。
html5になり、formのinput要素には、様々なタイプが追加されました。
type:[color , date , datetime , datetime-local , email , month , password , number , search , tel , text , time , url , week]
例えば、type=”email”の場合は、入力値がメールのパターンで入力されているかCSSで判定するための、:valid等の疑似クラスを使用することが出来ます。
以下のセレクターについて、CSSにより、必須項目や、不正値の場合、フィールドの下枠線を赤で表示する等のスタイルを追加しました。
example selectors
:required,
input[type="email" i]:valid:not(:placeholder-shown){...}
input[type="email" i]:not([placeholder]):valid{...}
input[type="email" i]:invalid{...}
input[type="email" i]:disabled{...}
input[type="email" i]:read-only{...}
input[type="radio"]:indeterminate + label:before { content:'?';...}
動作環境について、
<input type="text" placeholder="hello world" id="xxx" val=""><label for="xxx">hello world</label> 以下のような構造の場合は動作しません <label><input type="text" placeholder="hello world" id="xxx" val="">hello world</label>
また、コンタクトフォームプラグイン等で、優先スタイルが設定されている場合も動作しません。
グローバル変数の追加
$raindrops_use_part_gallery_template, $raindrops_use_part_blog_template の2つの変数を追加しました。
この変数は、カテゴリー ブログ カテゴリー ギャラリー（投稿フォーマット ステータス、投稿フォーマット ギャラリー）を選択した場合に、part-gallery.php,part-blog.phpを使用するかどうかを設定するための変数です。
version: 1.497 Overview of Changes
Added body CSS Class rd-basefont-[13-20]
This Classes relate Base Font Size in Customize / Presentation / Fonts
Added Added Codemirror editor to Custom CSS For This Entry in post edit window
Modified visual settings
Kerning enabled all languages
for Japanese environment
Kerning enabled with font-feature-settings: “palt”;
Changed Default fonts.
When using theme default font, YuGothic, Chrome Browser and Opera Browser are displayed as faint letters in Japanese.
Change Noto Sans JP (japanese) http://www.google.com/fonts/earlyaccess
Other browsers use YuGothic as the default font.
With this change kerning for Japanese has become effective with major browsers including IE 10 or more and edge browser
Basic Form validation styles added
type:[color , date , datetime , datetime-local , email , month , password , number , search , tel , text , time , url , week]
example selectors
:required,
input[type=”email” i]:valid:not(:placeholder-shown),
input[type=”email” i]:not([placeholder]):valid,
input[type=”email” i]:invalid,
input[type=”email” i]:disabled,
input[type=”email” i]:read-only,
input[type=”radio”]:indeterminate + label:before { content:’?’;…}
Note:
Even if: valid is blank, since it evaluates to true,
I made a setting to support depending on whether or not a placeholder is displayed.
Known Issue
Must Needs Form Structure
<input type="text" placeholder="hello world" id="xxx" val=""><label for="xxx">hello world</label>Not Work Structure
<label><input type="text" placeholder="hello world" id="xxx" val="">hello world</label>IE, Edge not support
Added global vars
Variables to limit the behavior of very old template part files, part-gallery.php, part-blog.php
$raindrops_use_part_gallery_template, $raindrops_use_part_blog_template