CSSに代わるものはありますか?


88

CSSに代わるスタイルシートフォーマット言語はありますか?または、CSSはスタイルシートの書式設定タイプの処理を行うための現在の単一言語ですか?

Wikipedia(http://en.wikipedia.org/wiki/Cascading_Style_Sheets)でのCSSの記述と、CSSに関する他のいくつかのコメントを見て、さまざまなレイアウトエンジンでのCSSの完全なサポートの欠如に落胆しました。代替手段があるかどうか、またはCSSフィルターの使用方法も学ばなければならないかどうかだけ知りたいです。

洞察をありがとう。


10
CSSが問題なければ*、壊れているのはIEです。(* CWGを除く)
アナカタ2009年

74
代替案があったら... CSSで簡単にできるはずのことをしようとして無駄になった人間の努力の量を考えると身震いします...
PeterAllenWebb

8
おもしろいのは、スタイル関連のタグにstyle = "text / css"と入力する必要があることです... :)

3
それはプログラマーのためでさえありません。プログラミングでは、ドキュメントの実行順序を上から下に並べます。CSSではそれさえありません。フロントエンドが見つかるまで分析を開始できない複雑で静的な文字列のWebから、盲目的にアクセスされ、まったく異なるドキュメントに適用される一連のプロパティがあります。物事がドキュメント全体で盲目的にカスケードされているため、一部の効果がどこから発生するかさえわかりません。
GameKyuubi 2015年

1
CSSは宣言型です。Webは流動的であるため(ユーザーは巨大なモニター、ラップトップ、スマートフォン、またはスクリーンリーダーを使用していますか?)、グラフィックデザイナーは、Photoshopなどで使用されている手法を使用できません。キャンバスのサイズは彼らの管理下にあります。同様に、ユーザーエージェントが異なるとレンダリングが異なるため、コンピュータープログラマーのように、「ここでの実行方法」ではなく、「ここで実行したいこと」と言う必要があります。CSSが多くの改善を行うことができず、使いやすくなったとは限りません。デザイナーとコーダーの両方が慣れているものとは本質的に異なる必要があるというだけです。
カナック、2016年

回答:


64

CSSが唯一の実際のオプションです。

CSSの詳細については、CSSのブラウザーサポートは(ほとんどの場合)主な問題ではありません。CSSについて理解するための鍵は、その目的はHTMLドキュメントのスタイルを定義することであり、コンテンツから分離する必要があることです。

機能をサポートしていないブラウザで物事を適切に低下させる方法を学ぶには、練習が必要です。ここでの基本的な考え方は、最も一般的な分母(通常はInternet Explorer)がユーザーエクスペリエンスを損なうことがないように「十分に」機能し、より良いブラウザーを持つユーザーに優れた機能を提供することです。また、最初にInternet Explorer用に開発しないください。最後までそのままにして、バグを修正します。逆の方法で(IEを最初に)行うことは、はるかに困難です。

JavaScriptを使用してスタイルを設定することもできますが、JavaScriptはスタイルではなくロジックを対象としているため、JavaScript内でスタイルを適用することは避けてください。

Webページには3つの(見方によって異なります)コンポーネントがあります。

  • HTML-コンテンツ用
  • CSS-コンテンツのスタイリング用
  • JavaScript-コンテンツに追加または動的ロジックを適用するため

19
重要なのは2番目の文です。「CSSの詳細を理解したら、CSSのブラウザサポートは(ほとんどの場合)大きな問題にはなりません。」CSSの破損について最も不満を言う人は、CSSをほとんど知らない。
ロブ・アレン

1
+1:...優れた回答を得るため。最初に標準に合わせてコーディングし、次に IEの不安定なレンダリングエンジンのバグにパッチを適用するという提案は、間違いなくそれを行う方法です。
ジョンケージ

CSSをよく知っている場合、IE7は実際には非常にうまく動作します。@ロブ:聞いて、聞いて+1。
ライアンフローレンス

1
CSSを使用してアプリケーションを作成することは、アプリケーション開発者にとって本当の拷問です。ただし、Cappuccino.orgを除いて、この非常に明白な問題を解決する試みはほとんどありません。xcodeが間もなくhtml5を生成するという噂があります。それが発生した場合、xカオスが最高だからではなく、このカオスに終止符が打たれます。WebにSDKを実装するように他の人を導き、ブラウザにはUIコンポーネントが付属します(彼らはまだそれを表示するためにcssとhtmlを使用しますが、誰が気にしても、私たちはそれらを表示/使用/認識/学習しません)
Devrim

3
@RobAllen私が好きなプログラミング言語であるMalbolgeについても同じことが言えます。不可能だと思っている人は、それがどれほど素晴らしいかを理解するのに十分なほどよく知っていません。
AR、

68

プログラマーの視点から質問に答えようとしています。元のポスターは、よりグラフィックにやさしい代替案を探していたと思います-別のコンセプトを提供するものです。

CSS3がクロスブラウザーで採用されたとしても、CSSの方法(インラインボックス、フロート、マージンなど)のレイアウトはひどいものだと思います。私はプログラマーですが、私の父はグラフィックデザイナーです。彼らが20年間使用していたレイアウトソフトウェアは、CSSよりも簡単で高度な側面があると思います。


9
まさに!CSSとグラフィックレイアウトのコグニティブワークフローは、同じ抽象化レベルではありません。
Alex

5
私見では、この答えはさらに2015年には、定格の下で、そうである
Abhinav Gauniyal

13
「私の父はパブリッシャーであり、グラフィックデザイナーであり、私は幼い頃からグラフィックデザインを浴びてきました。20年前に彼らが使用したパブリッシングソフトウェアは、今日のHTML / CSSよりも先進的でユーザーフレンドリーでした。 ...違いは、お父さんがさまざまな画面サイズ、スクリーンリーダー、さまざまなブラウザバージョン(機能が異なる)などに合わせて設計していないことです。印刷用の設計は、画面表示用の設計よりもはるかに簡単です。したがって、CSSは印刷媒体のレイアウト用に設計された言語よりも複雑です。
J.テイラー

1
私は言語としてPostscriptを、配送手段としてPDFを推奨しました。私は殴られて、粘り強く投票されました。SOのドロイドは意見が好きではありません。
ATL_DEV

1
@Jテイラー、失うよ。どんな媒体を使ったデザインも簡単ではありません。CSSやHTMLを書くのと同じくらいのスキル、芸術、科学です。芸術を尊重してください。Postscriptはさまざまなサイズのメディアを処理するように設計されており、数十年前から存在しています。HTMLとCSSの要点は、Postscriptがデフォルトで行うものをWebブラウザーにレンダリングさせることです。HTMLとCSSはひどいです!
ATL_DEV

41

はい、あります。それはLESSと呼ばれ、CSSのコードの可読性に関するほとんどの問題に対処します。

サーバーでコンパイルすることも、less.jsを使用してクライアント側でオンザフライでコンパイルすることもできます。

本番環境では、それをコンパイルするビルドスクリプトを設定することをお勧めします(NodeJSでは、これはGruntgrunt-contrib-lessの簡単な部分です)。


編集:私がLESSを使用および推奨している場合でも、言及する価値のある他のオプションもあります。

SASS:Rubyの人はこれが大好きです。LESSのようなCSSのスーパーセットではなく、独自の構文を使用します。これに対処するために、彼ら CSSのスーパーセットであり、LESSに似ているSCSSを開発しました。

スタイラス:LESSと同様に、JavaScriptでコーディングされますが、これは一般的にNode.jsから使用されます。まだ試していないので保証できませんが、とても成熟しているので、欲しい機能があれば是非使ってみてください。

タービン:これはPHPでコーディングされています。それほど牽引力はありません。

CSSの切り替え:Pythonハッカーはこれを調べたくなるかもしれません。けん引力がさらに低下します。

さらにオルタナティブを感じているなら、 CSS CacheerCSScaffoldDtCSSCSSPPとさえ何かによってporneLを


あなたがチェックしたいかもしれない他のもの:

Compass:Rubyの人のための完全なCSSオーサリングフレームワーク。

WinLESS:Windows用のドラッグ&ドロップLESSコンパイラ。非常に優れており、実際にチェックする必要があります。

LESS要素 Preboot LESSHatおよび even.less:LESSのミックスインおよび定数のライブラリ。

ブートストラップ:Twitterによって開発されたフレームワーク。また関連: HTML5ボイラープレート

Normalize.css CSSリセットの代替手段。多くのリセットがありますが、1つの開発者として、私は言わなければなりません:ほとんどはがらくたです。自分で作るつもりがない場合は、これを使用してください。


更新 1.4以降、LESSに@extendもあります。可能であれば、必ず1.4以上を使用してください!これで、SASSではなくLESSを選択する理由が完成しました。


25
残念ながら、これはモデル自体に代わるものではないようです。
n611x007 2013

1
@naxaそしてなぜあなたはそれをしたいですか?モデルは素晴らしい(スタイルシート)、実装はひどい(CSS)。これらのツールは実装だけに取り組むため、非常に人気があります。
カミロマーティン

3
競争援助が進歩するからです。「スタイルシート」とはどういう意味ですか?私はそれをカスケードでテキストとは異なるファイル/セクションに関連付けます。しかし、テキストと(htmlで)マージされたラベルとコンテナーを使用するボックスモデルもあります。実装には依存性がありますか?-例 スタイルシートをhtml / xml以外に適用できますか?(スタイルシートを作成し、それをnot-gt / ltベースのテキストやバイナリ形式に適用したくない場合はどうなりますか?スタイルシートの実装を再利用したり、
実際

@naxa私が意味したことは、コンテンツからスタイルを分離するというコンセプトは素晴らしいモデルであり、私が「スタイルシート」と呼んでいるものです。そして、実装とはCSS構文を意味しましたが、CSSの代わりにLESSを使用することは、Javascriptの代わりにCoffeeScriptを使用するのと同じであることに同意します。それに、バイナリマークアップ形式があるので、なぜバイナリスタイルシートを作成できなかったのかはわかりませんが、考えてみると、スタイルシートは人間の問題(スタイルの書き込み)を解決するため、おそらくその名前では見つかりません。多くのドキュメントでは)、マシンの問題ではありません(または<FONT>タグを使用し続けます)。
カミロマーティン

4
これらは代替ではなくプリプロセッサであるため、私は反対票を投じました。CSSの上に配置し、最後にCSSを出力します。つまり、抽象化レベルは1つだけ高くなりますが、代替手段ではありません。
ProblemsOfSumit

17

はい。

他の誰もが言ったように、CSSが唯一の現実的な選択肢ですが、eXtensible Stylesheet Language(XSL)と呼ばれるWeb上の「スタイルシートの書式設定タイプ」用の別の言語、特にXSL-FOとして知られるようになった仕様のサブセットがあります。(オブジェクトのフォーマット)

ある時点で、あなたが尋ねた人に応じて、それはCSSと競合またはコラボレーションすることを目的としていました


1
W3Cは、XSLとCSSの関係の良い要約を持っています:w3.org/Style/CSS-vs-XSL
Patrick McElhaney 2009年


7

広く普及しているCSSは、すべてのブラウザーで完全にサポートされているわけではありません...(不明な)代替がこの目標をどのように達成すべきですか?


3
予測可能で直感的なレイアウトモデルを用意し、新しいバージョンの問題を修正するのではなく、間違いを犯さないようにします。
AR、

7

まあ、CSS 2.1はほぼすべてのブラウザーでかなりよくサポートされています。(IE6を除く)安全なサブセットが分かれば、グレースフルデグレードのCSSを簡単に作成できます。(したがって、サポートされていないブラウザでもページが完全に台無しになることはありません)

CSSブラウザーの互換性のヒントについては、http://www.quirksmode.orgを参照してください


4
quirksmodeの+1-CSSで始まるすべてのユーザーは、それについて知る必要があります。IE7はCSS2でもかなり悪いことを付け加えておきますが、残念ながらほとんどのWeb(そしてほとんどすべての企業ネットワーク)はIE 6と7だけなので、CSS2に注意する必要があります。
キース、


6

さまざまなレイアウトエンジンでCSSが完全にサポートされていないことに落胆した

jQueryには、ブラウザー間でCSSの互換性を高めるいくつかの方法があると思います。つまり、jQueryを使用していくつかの属性を指定すると、特定の機能をサポートしないブラウザーの回避策を使用しようとします。

CleverCSSというプロジェクトもあります。チェックしてみてください。ただし、これを代替する方法ではなく、わずかに異なる方法で定義します。


残念ながら、リンクは死んでいます。:-(
8

4

Wikipedia(http://en.wikipedia.org/wiki/Cascading_Style_Sheets)でのCSSの記述と、CSSに関する他のいくつかのコメントを見て、さまざまなレイアウトエンジンでのCSSの完全なサポートの欠如に落胆しました。代替手段があるかどうか、またはCSSフィルターの使用方法も学ばなければならないかどうかだけ知りたいです。

CSSは、標準。代替手段はありません。

すべてのブラウザが基本的なCSS機能をサポートしています。各(4?)メインブラウザーラインの新しいバージョンでは、標準のサポートが強化されていますが、これらの機能を使用するWebサイトは、以前のバージョンのユーザーには機能しません。これには2つの答えがあります。

  1. 「グレースフルデグレデーション」(またはその対、「プログレッシブ拡張」-グーグルイット)。ページが高度な機能を利用できる場合はそれを利用し、利用できない場合は引き続き機能します。

  2. あなたの聴衆は誰ですか?Webサイトへのビジターの99.8%が少なくともIE7を使用していることがわかっていれば、IE6でサポートされていないCSS機能について心配する必要はありません。ただし、これはあなたのビジネスに依存するので、まず事実を確認してください。

あなたができる最悪のことは、他のブラウザだけでなく、同じブラウザのそれ以降のバージョンでも壊れるページにつながるので、単一の特定のブラウザの癖にコードを書くことです。


4

ずっと前の代替手段であるJavaScriptスタイルシート(JSSS)は、Netscapeによって提案されたスタイルシート言語テクノロジーでした

ここに提案があり ますhttp://www.w3.org/Submission/1996/1/WD-jsss-960822 私はこれは良いアイデアだと思いますが悲しいことにCSSが勝ちましたが、おそらくいくつかの部分がJavaScriptと統合されましたか?

また、おそらくCSSを使用する代わりに、いくつかのテキスト効果にsvgを使用して、例
http://msdn.microsoft.com/en-us/ie/hh410107.aspx
といくつかのアニメーション
http://svg-wow.org/を見てください。 text-effects / text-effects.xhtml
いくつかのボタン効果https://www.svgopen.org/2008/papers/86-Achieving_3D_Effects_with_SVG/
これは、このhttp://www.hongkiat .com / blog / scalable-vector-graphics-text /


3

唯一の代替策は、<font>タグのように、HTML自体が持つ非推奨のフォーマットサポートです。しかし、あなたはそれをしたくありません。8-)


7
P(彼らは読む必要があり、少なくとも場合は/あなたのコードを修正...):あなたは、<フォント>を使用している場合、あなたはまた、私のような他のWeb開発者から穏やかに激しい憎悪発生する可能性があります
Svish

3

いいえ、CSSは今行くべき道です。フォーマット自体には何も問題はありませんが(実際には個人的にはかなり気に入っています)、ブラウザでのサポートのみがサポートされています(特にIEに関して)。CSS3をサポートするすべての主要なブラウザーが揃ったら、問題はないはずですが、それがいつ実現するかについてはあまり楽観的ではありません。


9
フォーマット自体に問題はありませんか?ジェフ・アトウッドを引用すると、「CSSは、DRYの原則に反する生きたがらくたに違反しています。あなたは絶えず、そしてやむを得ず自分自身を繰り返しています。 CSSの巨大なブロックをあちこちで繰り返します。)それも私の経験です。あなたはそれを上手にできるようになりますが、言語としてのメリットとは何の関係もありません
Peter

3

現在、CSSに代わるものはなく、これは良いことです。ブラウザーベンダー、W3C、WHATWGなどは、1つの仕様にそのまま同意するのに十分な時間がかかります。複数の仕様があった場合、どうなるか想像できますか?

とにかく、CSSを習得すると、CSSが何を破壊するかを理解し、CSSを使って作業するか回避するかを学ぶことができます。

お役に立てれば。


11
「現在、CSSに代わるものはなく、これは良いことです。」とは異なります。
ガンダルフ

ダーコが概説したグッドの狭い仕様内のグッドシングです。
Dom Vinyard


2

いいえ(ほとんど)

最大数のクライアントマシンで機能するレイアウトを作成する場合は、CSSを学ぶ必要があります。

ユーザーをIE8、Chrome、Safari、Firefoxに制限できる場合は、CSS2で問題を回避できる可能性があります。そうでない場合、CSS1とのすべての違いと、特にIE5と6で壊れている多くのことを学ぶ必要があります。 。

HTML 3.2には、いくつかのフォーマットタグ(<font>またはなど<center>)が含まれていますが、それらを使用して多くを行うことはできません。

なぜほとんど?-ユーザーがFlashまたはSilverlightのいずれかを持っていると想定して、それらのWebアプリケーションを構築する場合。そうすれば、レイアウトは完璧になりますが、機能するにはクライアント側プラグイン(誰もが持っているわけではありません)が必要です。本当にリッチなクライアントUIが必要な場合のみ、私はそのルートをたどります。


実際、HTML 3.2のフォーマットタグとテーブルベースのレイアウトを使用すると、多くのことができます。たとえば、これは私の古いWebサイト(約10年前)です:itek.at/alt/ganzneu-eng.html
Erich Kitzmueller 2009年

あなたの実際のサイトもレイアウトテーブルで行われます。*アクセシビリティ、*維持能力、* 30%のインターネットユーザーの多くが
ハンディキャップを

3.2でできることは、帯域幅、アクセシビリティ、メンテナンスの理由から、現代​​の開発では受け入れられません。必要がなければ、ダウンスケーリングする目的はありません。
アナカタ2009年

@ammoQ-可能ですが、変更には時間がかかります。00年代の初めに戻ると、サイトのデザインは大きな画像を切り分けて、結果のジグソーをテーブルに配置することでした。私はそれをたっぷりとやった、そしてそれは現代のものと比べてそれほど良くない。この方法でサイトを作成することもできますが、最終的に2002
Keith

2

CSSサポートの現在の状態はかなり恐ろしいことに同意します。

最善のアプローチは、標準に従ってCSSを記述し、さまざまなブラウザーが適切に準拠していないすべてのビットの修正を追加することだと思います。とはいえ、CSSのいくつかのビットを回避することはしばしば価値があります(たとえば、zレベルは、多くのブラウザでサポートのレベルが実際に混在しています)。


1

ゾリは正しいです。「xsltは代替手段です」

XSLTは、CSSがHTMLをレンダリングされたWebページに変換するのと同じように、XMLをレンダリングされたWebページに変換します。ただし、XSLTとHTMLまたはCSSとXMLを混在させることはできません。

CSS + XSLTの両方を使用して、レンダリングされたWebページを作成しました。



0

Adobe Postscriptは、CSSの最も可能性の高い代替手段です。問題は、デスクトップまたはWebで表示するにはAcrobatを必要とすることです。CSSよりもはるかに優れており、設計意図を維持し、プリンター、プロッター、携帯電話、タブレットなど、Postscriptインタープリターを備えたほぼすべてのデバイスに対応しています。

特定のデバイスに実装しない限り、Postscriptの学習曲線はゼロです。何百万人ものプログラマー、グラフィックアーティスト、アーティスト、プロのプリンター、さらには最も熟練したホームコンピューターユーザーでさえもプログラミングされています。アプリケーションのメニューから「印刷」または「保存」を選択するだけで、リンクとフィールド入力がサポートされます。検索可能ですか?それと、PSベースのドキュメントがGoogleの検索ページに頻繁に表示されます。

WebブラウザーからPDFの形式で表示できますが、HTMLやCSSのようなネイティブブラウザー言語ではありません。簡単で強力なのに、どうしてでしょうか。ウェブが始まったとき、アドビは近視眼であり、貪欲に言語を開いていました。彼らは、PSエンジンとコンテンツ作成製品にライセンスを販売したいと考えていました。アドビにとって、PSブラウザーをプレゼントすることは、ガチョウと金の卵をプレゼントするようなものでした。


-6

xsltは代替手段です

それはcssよりも強力です。

学ぶこととそれを使うことはより困難です。


4
XSLTはどのようにCSSに代わるものですか?彼らはまったく違うことをします。
Shiny and New安宇氏

私はそれらがXSL-FOを意味するかもしれないと思います、それは問題ありませんが、私の知る限りはブラウザで動作しません。
ジェレミーフランス語

1
いいえ、XSL-FOではなく、XSLTを意味します。XSLTでは変換を表現できるため、XSLTを使用すると、HTMLで表現できるあらゆる種類のフォーマットを表現できます。それは、CSSができることよりは少ないですが、XSLTが完全な代替手段であるとは言いませんでした。XSLTのものもCSSなどの別のファイルにあり、HTMLからXSLTファイルを参照できます。これら2つのプロパティにより、HTMLベースのドキュメントのフォーマットを冗長性なしに行うことができます。XSLTはFirefox、IEで動作しますが、他のものはテストしていません。
libeako 2009年

4
いいえ、ゾリ。XSLTでフォーマットすることはできません。元のコードに干渉したり、変換したり、IDに追加したり、IDから削除したりすることはできますが、スタイルを設定することはできません...
Gabriele Petrioli
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.