logo

パレット - カラフルに🎨

Palette — ビジュアルページビルダー、デザインの専門知識は不要です。

ライブデモ パレットをダウンロード

Scroll

Drupal 6、7、8のテーマ設定の違い

05/05/2020, by maria

これは、テーマ設定に影響を与えるDrupal 8の最も顕著な変更の一部のリストです。

詳細情報

1. Drupal 8は、Drupal 6および7のXHTMLとは対照的に、デフォルトでセマンティックなHTML5マークアップを出力します(Drupal 8 HTML5イニシアチブを参照)。
2. jQuery v2.xに加えて、Drupal 8にはModernizrUnderscore.jsBackbone.jsなどのフロントエンドライブラリが多数含まれています。
3. Drupal 8のコアRDFaモジュールは、schema.orgマークアップを出力します。
4. Drupal 8では、WAI-ARIA属性の広範な使用によりアクセシビリティが向上しています。
5. Drupal 8は、デフォルトのテーマエンジンとしてPHPTemplateに代わるTwigを導入します。つまり、theme_*関数とPHPベースの*.tpl.phpファイルが*.html.twig()テンプレートに置き換えられました。
6. Drupal 8には、CSSとJavaScriptの集約など、パフォーマンスを向上させる機能がデフォルトで含まれています。
7. Drupal 8には、モーダルダイアログやドラッグアンドドロップボタンなど、独自の管理画面で使用する新しいUI要素が付属しています。
8. Drupal 8には、レスポンシブテーマ、ツールバー、画像、テーブルなどのレスポンシブ機能が付属しています。
9. Drupal 6と7では、特定のページにCSSまたはJSを追加する場合は、drupal_add_css()関数とdrupal_add_js()関数を使用する必要がありました。現在は、レンダリング配列の#attachedプロパティにライブラリを使用してJS/CSSリソースを追加することに置き換えられています。
10. Drupal 8はIE 6、7、8をサポートしていないため、jQuery 2.0や、最新のHTML5/CSS3ブラウザのサポートを前提とするその他のコードを使用できます。
11. Drupal 8は、SVGをサポートしないブラウザ(IE8やAndroid Browser 2.3を含む)をサポートしていません。
12. Drupal 8のCSSには、Drupal 7よりもIDが少なくなっています。
13. Drupal 8のCSS(ファイル)構造は、SMACSSBEMに基づいています。
14. Drupal 8のCSSはCSS3疑似セレクターを使用します。
15. Drupal 8には、マークアップにクラスを注入し、対応するCSSを含むベーステーマであるClassyが付属しています。これにより、以前コアモジュールに含まれていた多くの前処理関数とCSSファイルが置き換えられます。
16. Drupal 8は、前処理関数からTwigテンプレートへCSSクラスを移動します。
17. Drupal 8は、ブレークポイントのメディアクエリを使用して、さまざまなデバイスでのサイトの外観を制御します。

D7とD8の間のCSSクラスの変更

メニュー

D7:

.menu li.expanded
.menu li.collapsed
.menu li.leaf
.menu li.active-trail
.menu li.first
.menu li.last

D8:

.menu-item--expanded
.menu-item--collapsed
.menu-item--active-trail
.menu-item:first-child
.menu-item:last-child

.menu-item--leafはめったに使用されなかったため削除されました。これは戻すことができます。@ 例を参照してください:https://www.drupal.org/node/2425691#comment-9629101
@todo このドキュメントのリンクに置き換えます。