検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >HTML/CSSコードを素早く書くZencoding実装_体験交流

HTML/CSSコードを素早く書くZencoding実装_体験交流

WBOY
WBOYオリジナル
2016-05-16 12:04:061407ブラウズ

この記事では、CSS セレクターを模倣した構文を使用して HTML と CSS を迅速に開発する新しい方法を示します。これは、Sergey Chikuyonok によって開発されました。

HTML コード (すべてのタグ、属性、引用符、中括弧などを含む) の作成にどのくらいの時間を費やしますか?エディターにコード ヒントがあれば、記述は簡単になりますが、それでも多くのコードを手動で入力する必要があります。

JavaScript に関して言えば、ページ上の特定の要素を取得したい場合にも同じ問題が発生します。大量のコードを記述する必要があり、保守や再利用が困難になります。 JavaScript フレームワークが登場し、CSS セレクター エンジンも導入されました。単純な CSS 式を使用して DOM 要素を取得できるようになりました。これは非常に優れています。

しかし、CSS セレクターを使用して要素をレイアウトしたり配置したりできるだけでなく、コードを生成できたらどうなるでしょうか?たとえば、次のように記述するとします。

コードをコピー コードは次のとおりです。

div #content>h1 p

…次のような出力が表示されます。
コードをコピー コードは次のとおりです。
>

上面的效果可以用dreamweaver，扩展下载地址 Zen Coding for Dreamweaver v.0.7 测试通过
有些迷惑吧？今天，我将向你介绍Zen Coding，一组用于快速HTML和CSS编码的工具。最初由Vadim Makeev在2009年4月提出(文章为俄语)，由鄙人(也就是我)开发了数月并最终达到比较成熟的状态。Zen Coding由两个核心组件组成：一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。看一下这个演示视频来看一下它们能为你做些什么。


注意：该视频原版位于Vimeo，但是要看的话需要翻[和谐]墙先，地址在这里：http://vimeo.com/7405114，上面的视频是我费尽周折从Vimeo上下载下来上传到优酷的，上传后质量竟被大打折扣了，囧。youtube上也有一份视频，是基于Aptana的演示，一样很精彩：http://www.youtube.com/watch?v=ug84Ypwqfzk。PS:貌似youtube要比Vimeo翻[和谐]墙容易些，不过如何翻[和谐]墙不在本站讨论范围。

如果你想跳转到详细介绍和使用指南，请看一下演示页面并立刻下载你适用的插件：

デモ

ダウンロード (完全にサポートされています)

ダウンロード (部分的にサポートされています。「省略形の展開」のみがサポートされています)

それでは、これらのツールがどのように機能するかを見てみましょう。

省略形を展開

展開省略形機能は、CSS のようなセレクターを XHTML コードに変換します。 「略語」という用語は少しわかりにくいかもしれません。なぜそれを単に「CSSセレクター」と呼ばないのでしょうか?最初の理由はセマンティクスです。「セレクター」は何かを選択することを意味しますが、ここでは実際に何かを生成しています。コードに対する長い代替案を書くことを意味します。 。 2 番目に、実際の CSS セレクター構文の小さなサブセットを使用し、いくつかの新しい演算子を追加するだけです。

サポートされているプロパティと演算子のリストは次のとおりです。

  • E
    要素名 (div, p);
  • E#id
    ID を使用する要素 (div#content、p#intro、span#error);
  • E.class
    クラス要素 (div.header、p.error.critial) を使用します。クラスを idID と組み合わせて使用​​することもできます: div#content.column.width;
  • E>N
    子要素 (div>p、div#footer>p>span);
  • E N
    兄弟要素 (h1 p, div#header div#content div#footer);
  • E*N
    要素の乗算 (ul#nav>li*5>a);
  • E$*N
    商品番号 (ul#nav>li.item-$*5);

ご覧のとおり、Zencoding の使用方法はすでにご存知です。次のような単純な疑似 CSS セレクター (えー、「略語」でごめんなさい) です...

コードをコピー コードは次のとおりです。

div#header>img.logo ul#nav>li*4>a

…そして、「省略形の展開」動作を呼び出します。

ここには、要素の乗算と項目の番号付けという 2 つの新しい演算子があります。たとえば、5 つの
  • 要素を生成したい場合は、単純に li*5 と書くことができます。また、すべての子孫要素もオーバーライドされます。内部に タグを含む 4 つの
  • 要素を書きたい場合は、単に li*4>a と記述するだけで、次の HTML コードが生成されます。
    コードをコピー コード




  • phpcnltphpc n/ li>

    • 最後のエントリ番号は、重複をマークする場合に使用されます。インデックス要素。 item1、item2、および item3 クラスを持つ 3 つの
    要素を生成するとします。省略形は div.item$*3 のように記述できます:
    コードをコピー コードは次のとおりです。



    tphpcn
    div>
    インデックスを作成したいクラスまたは ID 属性にドル記号を必要なだけ追加するだけです。つまり、これは...
    コードをコピー コードは次のとおりです。

    div# i$-test.class$$$*5

    は次のように変換されます:
    コードをコピー コードは次のとおりです。ディビジョン>


    div>




    Zencoding は、生成されたタグにデフォルト属性を追加するタイミング、または終了タグをスキップするタイミングをどのようにして認識するのでしょうか? zen_settings .js という専用のファイルがあります。 出力要素について説明します。これは、各言語の略語を記述した単純な JSON ファイルです (はい、HTML、XSL、CSS などのさまざまな構文の略語を定義できます)。共通言語の略語定義は次のようになります。
    コードをコピー コードは次のとおりです。

    'html': { 'snippets': { 'cc:ie6': '', ...
    },
    '略語': { 'a': '', 'img': '' 、
    ...
    }
    }

    元素类型

    Zen Coding有两个主要的元素类型：“片段(snippets)” 和 “缩写(abbreviations)”。片段就是随意的代码碎片，而缩写是标签定义。通过片段，你可以写出你想要的任何代码，它也会照你写的格式输出；但是你必须手动的格式化它(使用\n 和 实现换行和缩进) 并将${child}变量放到你想要输出子元素的地方，就像这样：cc:ie6>style。如果你不使用${child}变量，子元素将会输出于代码片段的后面。

    有了缩写，您必须编写标记定义，而且语法是非常重要的。通常，你必须写一个简单的带有所有默认的属性的标签，比如: 。当Zen Coding被加载后，它会解析一个标签定义到一个描述该标签的名字、属性(包括它们的顺序)以及该标签是否为空的特定的对象中。所以，如果你写”"，你会告诉Zen Coding这个标签必须是空的，然后“扩展缩写”行为就会在输出之前为它使用特定的规则。

    对于片段和缩写，你可以添加一个管道符号，它告诉Zen Coding当缩写被展开的时候光标会被定位到哪里。默认的，Zen Coding 将光标放在空属性的引号中间以及开始和关闭标签的中间。

    例子

    那么，这里解释一下当你写了一个缩写并召唤“展开缩写”行动时发生的事情。首先，它将一个完整的缩写分开为独立的元素：这样div>a 会被分成div 和a 元素，当然也会维持他们的关系。然后，每个元素，解析器先在代码片段内而后在缩写中寻找定义。如果它找不到，将会使用元素的名字作为新的标签，并为其添加缩写中定义的id和class。比如，如果你写mytag#example，解析器在片段或缩写中找不到mytag定义，它就会输出。

    我们制作了很多默认的CSS和HTML缩写和片段。你会发现学习使用Zen Coding可以增加你的生产力。

    HTML 标签对匹配器

    对于HTML编码者的另一个非常常见的任务是寻找一个元素的标签对。例如你想选择整个

    标签并将其移动到其它地方或者删除它。或者有可能你在寻找一个关闭标签并想知道它属于那个开始标签。

    残念ながら、最近の開発ツールの多くにはこの機能がありません。そこで、Zen コーディングの一部として独自のタグ ペア マッチャーを作成することにしました。まだベータ版であり、いくつかの問題がありますが、非常にうまく高速に動作します。 (通常の HTML タグ ペア マッチャーのように) ドキュメント全体をスキャンするのではなく、カーソルの現在の位置から始めて関連するタグを探します。これにより、非常に高速かつコンテキストフリーになります。JavaScript スニペットでも動作します:

    コードをコピー コード

    var table = ''; for (var i = 0; i table = ' '; for (var j = 0; j table = '';
    }
    table = '';
    }
    テーブル = '
    ' j '
    ';

    省略形の折り返しを使用する

    これは、略語とタグ ペア マッチャーの機能を 1 つに組み合わせた非常に優れた機能です。 ブラウザのバグを修正するにはラッピング要素を追加する必要があるとどのくらいの頻度で認識していますか?それとも、ブロックレベルのコンテンツに背景画像や枠線などの装飾を追加する必要がありますか?開始タグを記述し、コードを一時的に中断し、関連する箇所を見つけてタグを閉じる必要があります。ここで「略語で囲む」ことが役立ちます。

    この機能は非常に単純です。略語を入力するように求められ、適切な「略語展開」アクションが実行され、略語の最後の要素内に目的のテキストが配置されます。テキストを選択しない場合は、タグ ペア マッチャーが開始され、結果が使用されます。また、カーソルがどこにあるか、タグのコンテンツ内、開始タグと終了タグの間なども認識します。位置に応じて、タグのコンテンツまたはタグ自体をラップします。

    省略形の折り返しでは、個々の行を折り返すための特定の省略形構文が​​導入されます。乗算演算子の後の数値にジャンプするだけです (例: ul#nav>li*>a)。 Zen コーディングは、未定義の乗数を使用する要素を見つけると、それを繰り返し要素 として扱います。チャプタ内の行数と同じだけその要素を出力し、コンテンツを追加します。繰り返される要素の最後の子要素。

    このテキストの周囲にこの略語 div#header>ul#navigation>li.item$*>a>span を囲むと次のようになります:

    コードをコピー コードは次のとおりです。

    会社概要
    製品
    ニュース
    ブログ
    お問い合わせ

    次の結果が得られます：
    复制代码代码如下:

    你可以看到，Zen Coding是一个强大的文本处理工具。

    快捷键

    • Ctrl+,
      展开缩写
    • Ctrl+M
      匹配对
    • Ctrl+H
      使用缩写包括
    • Shift+Ctrl+M
      合并行
    • Ctrl+Shift+?
      上一个编辑点
    • Ctrl+Shift+?
      下一个编辑点
    • Ctrl+Shift+?
      定位匹配对

    这些快捷键是可以自定义的。

    在线演示

    你已经学到很多关于Zen Coding如何工作以及它是如何使你的编码更容易了。现在为什么不自己尝试一下呢？因为Zen Coding是用纯JavaScript开发并迁移到Python，它甚至可以用于浏览器内部，这令它成为引入到CMS的首选。

    支持的编辑器

    Zen Coding并不依赖某个特定的编辑器。它是一个只处理文本的出色的组件：它获取文本、做一些处理并放回新的文本(或索引，用于标签匹配)。Zen Coding由JavaScript和Python编写，所以它实际上可以运行于任何平台。在Windows，你可以运行JavaScript版本，而Mac和Linux 分支可以使用Python版。

    如果让你的编辑器支持Zen Coding，你需要写一个特定的可以在你的编辑器和Zen Coding之间转换数据的插件。问题是一个编辑器可能不会完整的支持Zen Coding因为它本身的插件系统。比如，TextMate通过使用脚本输出替换当前行很容的就支持了“展开缩写”功能，但是它不能处理标签对匹配因为没有标准的方法请求TextMate来选择内容。

    完全支持

    部分支持(只支持“展开缩写”)

    Aptana是我主要的开发环境，它使用一个JavaScript版本的Zen Coding。它也包含很多其它的我用于日常工作的工具，所以任何一个新的Zen Coding版本都将会首先对Aptana可用，然后部署到Python并兼容其它的编辑器。

    Coda和Espresso 插件被杰出的Text Editor Actions (TEA) 平台支持，由Ian Beck开发。原始的源代码在GitHub上，但我还是制作了我自己的分支以整合Zen Coding的特性。

    总结

    很多尝试过Zen Coding的人都说它改变了他们写页面的方式。当然还有很多事情要做，还有很多的编辑器需要被支持以及一些文档要写。请浏览现在的文档 以及源代码以寻找你的问题的答案。希望你喜欢Zen Coding!

    附：Zen coding的具体用法

    遗憾的是， 本文原作者并没有说明zen coding的具体用法，神飞认为有必要做以下简要的说明。这里就以Aptana/Eclipse和Dreamweaver为例，其它编辑器平台暂不描述，如有疑问可以在评论中与前端观察的网友交流。

    Aptana/Eclipse

    由于Aptana本身就是基于Eclipse的，所以，Zen Coding也是支持Eclipse的，只是需要一个EclipseMonkey插件的支持，Aptana已经封装了这个插件，所以如果你使用Aptana，下面的第一步可以跳过。

    1. 更新 Web サイトから EclipseMonkey をインストールします: http://download.eclipse.org/technology/dash/update (Aptana を使用している場合は、この手順をスキップできます)
    2. 現在のジョブでトップレベルのプロジェクトを作成し、zencoding などの名前を付けます。
    3. 新しく作成したプロジェクトに scripts フォルダを作成します。
    4. ダウンロードした ZIP プラグイン パッケージをこのフォルダーに解凍します。プロジェクトの構造は次のようになります。

    5. インストール後、Aptana のメニュー バーの「スクリプト」メニューに Zen コーディング関連のサブメニューが表示されます。
      6.

    注:

    • Aptana の公式プラグインは MAC ベースです。Windows を使用している場合は、ショートカット キーを手動で変更する必要があります (各ファイルの先頭にあるコメント部分で変更します)。
    • 公式ファイルのエンコードは少し面倒です。公式 JS を変更するときはエンコードの問題に注意してください。不適切な変更を行うと、関連する機能が失われます。

    ドリームウィーバー

    良いニュースは、DreamWeaver プラグインの Zen コーディングが存在することです。悪いニュースは、このプラグインがサポートする機能が非常に少なく、略語の展開のみをサポートすることです。また、デフォルトのショートカットキーは無効です。アクションは、「コマンド」メニューでのみクリックできます。また、プラグインが CS4 バージョンのみをサポートしているかどうかはテストしていません。しかし、さらに良いのは、作成者がこのプラグインのソース コードも公開しており、Dreamweaver プラグインをカスタマイズできることです。

    実は、公式の DW プラグインには、Windows 上で空白行が表示されるという少しのバグがあります。それを修正してパッケージを再コンパイルしただけです。このマシンでテストした場合は問題ありません。ご興味がございましたら、子供用の靴をダウンロードしてお試しいただけます: http://www.boxcn.net/shared/c71z7x7sfe

    追記: 公式の DW プラグインが更新されました。推奨 公式のダウンロードに移動してください。新しいプラグインにより、さらに多くの機能サポートが追加されます。 更新 @ 2009 年 12 月 23 日

    特別な推奨: 学生の Haoqing は略語を実践し、多くの優れた使用例をまとめました。皆さんに 学習に行く) ことをお勧めします。 >。

    原作者の紹介:

    Sergey Chikuyonok はロシアのフロントエンド開発エンジニアであり、画像や JavaScript 効果からワークフローや時間節約コーディングに至るまで、最適化に情熱を持っている作家です。 彼のホームページとTwitterにアクセスしてください。 >。

    原文の出典: http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html

    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：デフォルトのスタイルをリセット CSS リセット次の記事：デフォルトのスタイルをリセット CSS リセット

    関連記事

    続きを見る