pbLCD.css によって HTML で画面イメージを記述することができます．pbDisplay.css の後継ライブラリで表現力とアクセシビリティが向上しています．
ごく一部の CSS のサポートが不十分なブラウザに対しては JavaScript で表現を補います．また画像と CSS が使えない環境でも情報の欠落が無いように細心の注意を払って設計されています．
表示の例
RUN DEG A 1 24
pbLCD.css の提供する機能
- PB-100 シリーズの画面イメージを HTML で記述出来る．CSS が無効な環境でも情報の欠落を最小限に抑えるように設計されています．
- キャラクタを透過する．
- ゴースト．透過したキャラクタに他のキャラクタを重ねる．
- レンジ．複数桁に跨る下線を表示して説明対象の範囲を示す．下線の色は複数から選べる．
- ツールチップ．ツールチップをキャラクタの上下に付けて説明を加える．また、ツールチップの横位置はレンジ内の任意の桁とその桁の間に設定できる．下線と同じ色が設定される．
JavaScript が有効の環境で提供される機能
:before,:after疑似要素に非対応の環境を検出して、同等の要素を挿入してフォールバックします．:before,:after疑似要素に対応するも、スタイリングに制限のある環境を検出して、同等の要素を挿入してフォールバックします．- アニメーション GIF に非対応の Opera 7.20 未満のカーソルを明滅させます．
ゴーストの主客
この項目は準備中です。
CSS が無効の場合や、テキストブラウザでの表示
この項目は準備中です。
ブラウザ対応表
| 記号 | 説明 |
|---|---|
| ◎ | CSS と画像が有効の場合、適切に表示される |
| 〇 | CSS と画像に加えて JavaScript が有効の場合、フォールバックで適切に表示される |
| △ | ActiveX フィルターが無効だと適切に表示できない点がある |
| × | 表示できない |
| グレード | ブラウザ | 1. 基本機能 | 2. 透過 | 3. ゴースト | 4. レンジ | 5. ツールチップ | ハイコントラストモード | 印刷(背景を印刷しない) |
|---|---|---|---|---|---|---|---|---|
| A | Microsoft Edge 79+, Chrome 89+, Firefox 89+ | ◎ | ◎ | ◎ | ◎ | ◎(*2) | ◎ | ◎ |
| モダンブラウザ(*1) | ◎ | ◎ | ◎ | ◎ | ◎(*2) | - | ◎ | |
| Internet Explorer 11~10, Microsoft Edge 12~18 | ◎ | ◎ | ◎ | ◎ | ◎ | ◎ | ◎ | |
| Internet Explorer 9, Firefox 3.5+. Pale Moon | ◎ | ◎ | ◎ | ◎ | ◎ | 〇(*3) | ◎ | |
| B | Internet Explorer 8 | ◎ | ◎ | ◎ | ◎ | ◎ | △(*6) | ◎ |
| Opera 7.2~9.27 | 〇(*5) | - | 〇(*5) | |||||
| Firefox 2~3(Gecko 1.8.1~1.9.0) | 〇(*5) | ×(*7) | ×(*8) | |||||
| Internet Explorer 7 | ◎ | ◎ | 〇(*3) | ◎ | 〇(*3) | ×(*7) | ×(*8) | |
| Internet Explorer 5.2 for Macintosh | 未検証 | |||||||
| C | Internet Explorer 5, 5.5, 6 | ◎ | △(*4) | ◎ | 〇(*3) | ×(*7) | ×(*8) | |
| Opera 7.0~7.1, Firefox 1~1.5(Gecko 1.4~1.8.0) | 〇(*5) | - | ×(*8) | |||||
| Gecko 0.6~1.3.1 | 〇(*5) | 〇(*9) | - | ×(*8) | ||||
- ハイコントラストモードに非対応のブラウザ．Windows 用の Internet Explorer, Edge(EdgeHTML または Chromium), Firefox, Pale Moon 以外のもの．
- 新しいブラウザではツールチップに影が付き角が丸くなります．
- JavaScript が有効な場合、コンテンツが表示できます．
- JavaScript が有効な場合、コンテンツが表示できます．但し ActiveX フィルターが無効の場合、疑似的な透過表示になります．
- JavaScript が有効でないとブラウザエンジンとバージョンに適した CSS が読み込まれず Web サイトの閲覧が困難です．
- JavaScript が無効の場合、ツールチップの尻尾を鋭角に出来ない．Internet Explorer 8では
:after疑似要素へ ActiveX フィルターを適用出来ないため．JavaScript が有効で ActiveX フィルターが無効の場合、尻尾は非表示になります． - 他のブラウザのように
content:url()を使った画像置換が出来ず、background-imageを使っている為、ハイコントラストモードで欠落する． - 他のブラウザのように
content:url()を使った画像置換が出来ず、background-imageを使っている為、背景を印刷しない設定の際には欠落する． - CSS-P に関連するペイントのバグを回避する為、フォーカス時の表現が他のブラウザに劣ります。
より詳しい情報は「hamura.cssのマルチブラウザ技術、pbLCD.cssとpbChr.css, pbList.cssのフォールバックの画像置換と強制カラーモード」を参照します．
pbLCD メーカー
pbLCD.css によるマークアップはお約束がたくさんあるため人力で書くのは困難です．このためのツール pbLCD メーカーで HTML を作成します．ツールで生成した HTML には改行等の変更を一切加えずにコピーペーストしましょう．
pbLCD メーカーは開発中です！